我正在尝试使此模板在chrome上兼容，主要问题是每次刷新页面时，项目都会更改位置，这是站点zygi.loginet.gr，它在mozilla上运行良好。
/* reset/default rules */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, acronym, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, thead, tr, th, td {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
font-family: 'open_sansregular';
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a img, :link img, :visited img {
border: 0;
}
img {
max-width: 100%;
height: auto;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
}
a, .inputbox {
outline-width:0;
}
a {
/*transition: all 0.5s ease;*/
text-decoration: none;
color: #90AF63;
}
a:hover {
color: #B1BC42;
text-decoration: none;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
background: #fff;
color: #777;
}
html {
height:100%;
width:100%;
}
p {
font-size: .9em;
font-weight: 400;
line-height: 1.8;
}
.block {
display: inline-block;
width: 100%;
padding: 2.5em 0;
}
.block-clients {
background-color: #f6f6f6;
display: inline-block;
width: 100%;
padding: 2.5em 0;
}
.block-clients h3 {
font-size: 2em;
font-weight: 300;
letter-spacing: -1px;
padding-bottom: 1em;
text-align: center;
}
.block-services {
display: inline-block;
width: 99%;
padding: .5em 0 1.5em 0;
}
.innerBlock, .contentTop .vendor-store-desc p, .contentTop .vendor-store-desc .page-header, .contentTop .topten-view, .contentTop .category-view .row {
max-width: 1210px;
margin: 0 auto;
}
/* /reset/general rules */
/*---------------------------------------------------------------------------------------*/
/* base typography */
h1{ font-size: 1.6em }
h2{ font-size: 1.4em; line-height: 1.4em; }
h3{ font-size: 1.3em }
h4{ font-size: 1.2em }
h5{ font-size: 1.1em }
h6{ font-size: 1em }
/* /base typography */
/* buttons */
button, .button, .btn, .btn-primary, #input .button {
padding: .3em 1em;
color: #fff;
border-radius: 2px;
margin-top: .5em;
transition: all .2s linear;
}
input.button:not([type="checkbox"]) {
border-top: none;
border-right: none;
border-left: none;
color: #fff;
}
a.button{
display: inline-block;
}
/* colors for diferent buttons */
.button.common {
background: transparent;
border: 2px solid rgba(255, 255, 255, .65);
}
.button.common:hover, .button.common:focus {
border: 2px solid rgba(255, 255, 255, 1);
}
/* /colors for diferent buttons */
.form-actions {
background: none;
}
/* slider / bg image */
.slider {
background-image: url(../images/mainIntroImg.jpg);
margin-top: -3px;
padding: 2em 0;
position: relative;
text-align: center;
line-height: 2.4em;
color: #fff;
background-size: auto;
}
.slider .innerBlock > .moduletable {
background: url(../images/sliderInnerBg.png) no-repeat bottom right;
}
.slider a {
display: inline-block;
color: #fff;
}
.slider a:hover {
color: #cdcdcd;
}
.slider h1 {
border-bottom: 1px solid #fff;
color: #fff;
font-size: 2.5em;
font-weight: bold;
padding: 3% 0 2% 0;
text-align: left;
width: 50%;
}
.slider p {
font-size: 1.4em;
font-weight: 100;
line-height: 1.8em;
}
.slider-content {
display: inline-block;
margin-bottom: 5px;
width: 100%;
text-shadow: 5px 5px 10px #888;
}
.slider-content-desc {
width: 53%;
}
ul.slider-services {
background: rgba(125, 167, 217, .7);
padding: 29.5px 2%;
width: 48.6%;
}
ul.slider-services li {
display: inline-block;
}
ul.slider-services li::after {
content: "//";
color: #B4A16D;
text-shadow: 0px 1px 1px #333;
padding: 0 4px;
}
.blog .item {
text-align: center;
transition: all .2s linear;
margin: 1em 1%;
padding: 1em 0;
}
.blog .item:hover, .services ul li:hover {
background: #eee;
}
.blog .item h2 {
font-size: 1em;
}
.blog .item-image.pull-left {
float: none;
}
.blogPreview .servicesImg {
text-align: center;
}
.services ul li, .contentCustomers ul li, .blogPreview ul li {
padding: .25%;
margin: 0 .25%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.services ul li {
width: 23.7%;
transition: all .2s linear;
padding-bottom: .5em;
}
.blogPreview ul li {
width: 23.7%;
transition: all .2s linear;
padding-bottom: .5em;
}
.contentCustomers ul li {
width: 15.3%;
}
.servicesImg, .blogPreview ul li > img {
display: inline-block;
width: 100%;
transition: .2s linear all;
border-radius: 50%;
}
.blogPreview .servicesImg img, .logiBlog .leadingArt > .item-image img {
/*max-height: 171px;*/
max-width: 100%;
height: auto;
padding: 6px;
background: #fff;
border: 1px solid #ddd;
box-sizing: border-box;
}
.blogPreview li:hover .servicesImg img {
border: 1px solid #999;
}
.mod-articles-category-title {
color: #343433;
transition: color 0.2s linear 0s;
line-height: 1em;
padding: .3em 0;
margin-bottom: .4em;
display: inline-block;
}
a.mod-articles-category-title:hover {
color: #71A45B;
}
p.mod-articles-category-introtext{
font-size: .9em;;
font-weight: 400;
line-height: 1.6;
min-height: 6.3em;
}
.services .mod-articles-category-title {
font-size: 1.3em;
}
/* /services */
/* blogPreview */
.blogPreview li a, .blogPreview li span {
text-align: left;
display: inline-block;
width: 100%;
}
.blogPreview a.mod-articles-category-title {
color: #6190be;
font-size: .9em;
line-height: 1.2em;
font-weight: 700;
}
.blogPreview a.mod-articles-category-title:hover {
color: #444;
}
.blogPreview .mod-articles-category-date {
font-size: .8em;
}
/* /blogPreview */
/* content blocks and particular (.)block - sections styling */
.contentTop {
padding: 0 0;
}
.xselling a, .xselling {
color: #000;
text-align: center;
}
..xselling a {
margin: .2em 0;
}
.xselling {
padding: 1em 0;
float: left;
border-top: 1px solid #000;
}
.page-header, .topten-view h4, .xselling h3 {
font-size: 1.8em;
font-weight: 300;
letter-spacing: -1px;
text-align: center;
padding: 0;
border: none;
position: relative;
}
.page-header, .topten-view h4 {
margin: 2em auto!important;
}
.page-header h2 {
display: inline;
line-height: 0;
padding: 0 .5em;
}
.topten-view h4:before, .topten-view h4:after, .xselling h3:before, .xselling h3:after {
background: #90AF5F;
}
.page-header:before, .page-header:after{
background: #000;
}
.page-header:before, .page-header:after,
.topten-view h4:before, .topten-view h4:after,
.xselling h3:before, .xselling h3:after {
content: "";
display: block;
width: 30%;
height: 2px;
position: absolute;
top: 40%;
}
.page-header:before,
.topten-view h4:before,
.xselling h3:before {
left: 0;
}
.page-header:after,
.topten-view h4:after,
.xselling h3:after {
right: 0;
}
.block h3 {
font-size: 2em;
font-weight: 300;
letter-spacing: -1px;
text-align: center;
padding-bottom: .5em;
}
.pxBg {
background-attachment: fixed;
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
}
.whiteTrans {
background: rgba(255,255,255,.45);
padding: 2.5em 0;
text-align: center;
}
.vendor-store-desc {
background-image: url(../images/shopBg.jpg);
margin: 0;
color: #000;
}
.communication {
background: #6190BE;
text-align: center;
display: inline-block;
margin: auto;
width: 100%;
padding: 2% 0;
}
.communicationCont {
display: inline-block;
margin: auto;
width: 48%;
}
.communicationText {
display: block;
margin: auto;
color: #fff;
font-size: 2em;
line-height: 2em;
}
.communicationImg {
display: block;
float: left;
}
.communicationImg img {
}
.bgContThree, .contentHeader {
background-image: url(../images/logiPxBg1.jpg);
color: #fff;
font-size: 1.4em;
line-height: 1.2em;
}
.bgContThree {
background: #6190BE;
}
/* content blocks and particular (.)block - sections styling */
/* preFooter */
.preFooter {
background: #6190be;
color: #fff;
text-align: center;
font-size: 1.2em;
line-height: 1.6em;
font-style: italic;
margin-bottom: -4px;
}
.preFooter img {
vertical-align: middle;
}
/* pre foter quote + contnent header*/
.bottomQuote {
color: #fff;
}
.contentHeader, .bottomQuote {
text-align: center;
}
.contentHeader h1 {
padding-bottom: .3em;
margin-bottom: .3em;
}
.bottomQuote p, .contentHeader p {
font-weight: 100;
line-height: 1.25;
padding-bottom: 20px;
display: inline-block;
width: 100%;
}
.bottomQuote p {
font-size: 1.4em;
}
/* /preFooter */
/* Footer */
.footTop > div {
display: block;
float: left;
border-right: 1px solid #91B062;
width: 24%;
margin-right: 1%;
}
.footer.block {
display: block;
}
.footTop > div:last-child {
border: none;
margin-right: 0;
}
.footerBottom .innerBlock > div {
display: inline-block;
width: 48%;
}
.footer3 span, .footer4 p > *{
display: block;
float: left;
width: 65%;
margin-left: 20%;
padding: .5em;
}
.footAdd:before, .footPhone:before {
content: '';
display: block;
width: 17px;
height: 20px;
margin-right: .4em;
background-image: url(../images/miniSprite.png);
background-repeat: no-repeat;
float: left;
}
.footAdd:before {
background-position: 0 0;
}
.footPhone:before {
background-position: -17px 0;
}
a.footFbLnk {
background: #fff;
color: #4C4C4C;
border-radius: 4px;
font-weight: 700;
}
.copyYear {
float: right;
text-align: right;
}
/* SOCIAL ICONS */
.social, .social > li {
display: inline-block;
}
.social > li.skype {
width: 100%;
text-align: center;
}
.social > li > a {
background: #fff;
border-radius: 50%;
color: #000;
display: inline-block;
font: 1.3em/2.3em 'icons';
height: 2.3em;
width: 2.3em;
position: relative;
text-align: center;
transition: all 0.4s ease-out 0s;
text-decoration: none;
margin: .2em;
}
.social > li a:hover {
background: #000;
color: #fff;
}
.social i {
font: 1em/2em 'icons';
}
/* footer */
.footer{
background: #363636;
color: #91B062;
padding: 1em 0;
font-size: 90%;
}
.footer .logo {
width: 100%;
}
.footer h3 {
color: #91B062;
margin-bottom: .5em;
}
.footTop {
padding: 1em 0;
}
.footer ul.menu li a {
color: #91B062;
font-size: .9em;
margin-bottom: .2em;
}
.footer ul.menu li a:hover, .footer ul.menu li a:focus {
background: transparent;
}
/** mailchimp form **/
#mc_embed_signup {
background: #202020;
display: inline-block;
width: 90%;
padding: 1.2em 5% 1.7em;
text-align: left;
border-radius: 3px;
}
#mc_embed_signup h2 {
font-size: .8em;
color: #ccc;
}
#mc_embed_signup label {
display: none;
}
#mc_embed_signup input#mce-EMAIL {
color: #ecebe9;
float: left;
margin: 0 18px 0 0;
max-width: 100%;
position: relative;
width: 280px;
color: #444;
z-index: 10;
}
#mc_embed_signup input.button {
vertical-align: top;
display: inline-block;
float: right;
max-width: 20%;
margin: 0;
}
.mc-field-group {
position: relative;
max-width: 50%;
}
.mce_inline_error {
}
/** /mailchimp form **/
/* /footer */
/* footer bottom */
.footerBottom {
padding: 1em 0;
margin: .7em 0;
}
/* /footer bottom */
/* Contact Form additions */
.contact {
width: 70%;
text-align: center;
padding-bottom: 1em;
}
.contact h2 {
border-bottom: 1px solid #E8E8E8;
color: #676767;
line-height: 0;
margin: 1.5em 0 1em;
font-size: 2em;
font-weight: 300;
letter-spacing: 0.5px;
}
.contact h2 span {
background: #fff;
padding: 0 1em;
}
.contact, .contactRight {
display: inline-block;
vertical-align: top;
}
.contactRight {
width: 28%;
margin: 9.55em 0 0 1.5%;
}
.contact h3 {
font-size: 2em;
padding: 1em 0;
margin: .5em 0;
}
input:not([type='checkbox']),input:not([type='submit']), textarea {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-radius: 0;
background-color: #efefef;
border-color: -moz-use-text-color -moz-use-text-color #fff;
border-image: none;
border-style: none none solid;
border-width: 0 0 1px;
box-shadow: 1px 5px 9px rgba(0, 0, 0, 0.09) inset;
color: #555;
font-size: .8em;
font-weight: 400;
line-height: 1.2em;
padding: .8em 1%;
transition: all 0.2s linear 0s;
width: 98%;
}
input:not([type='checkbox']):focus, input:not([type='submit']):focus, textarea:focus {
box-shadow: 0!important;
}
/** contact form labels **/
.contact-form label {
display: inline-block;
width: 100%;
text-align: left;
padding-bottom: .3em;
}
.contact-form .form-horizontal .control-label {
display: inline-block;
width: 100%;
}
.contact-form .form-horizontal .controls {
margin: 0;
}
.contact-form .form-horizontal .form-actions {
padding: 0;
border: none;
text-align: left;
}
/** /contact form labels **/
/** contact block inside the sidebar **/
.sidebar > .contactSidebar h3 {
text-align: center;
}
.sidebar > .contactSidebar {
padding: 2em;
box-sizing: border-box;
border: 1px solid #e3e3e3;
text-align: center;
}
/** /contact block inside the sidebar **/
/* /normal blog layout - using the parent class .logiBlog */
/* bootstrap overrides and additional exceptions */
.contactRight .dl-horizontal dt {
width: auto;
}
.contactRight .dl-horizontal dd {
margin-left: 2em;
}
dl.contact-address {
padding: 0 0 1em 0;
margin: .5em 0;
}
dl.contact-address span {
display: inline-block;
width: 100%;
}
dl.contact-address > dt, dl.contact-address > dd {
display: inline-block;
padding: .3em 0;
}
dl.contact-address > dd {
width: 80%;
}
.item-page ol, .item-page ul {
margin: 0 0 10px 25px;
padding: 0;
font-size: 0.9em;
font-weight: 400;
line-height: 1.8;
}
#portfolioMini ul, .portfolioSide ul, ul.latestnews {
margin: 0;
list-style: none;
}
/* bootstrap overrides */
/* career page */
ul.careerDpts {
display: block;
width: 100%;
margin: 0 auto;
position: relative;
height: 100%;
min-height: 40em;
}
ul.careerDpts li {
width: 20%;
height: 100%;
min-height: 4.5em;
display: inline-block;
padding: 1em 0;
color: #fff;
border-radius: 20px;
background: #ccc;
margin: 4%;
position: absolute;
height: 3em;
text-align: center;
font-size: 1.2em;
font-weight: 700;
line-height: 1.4em;
transition: .2s all linear;
cursor: pointer;
}
ul.careerDpts li span {
display: inline-block;
vertical-align: middle!important;
width: 70%;
height: 100%;
margin-top: 6%;
}
ul.careerDpts li:nth-child(6) span, ul.careerDpts li:nth-child(2) span {
width: 65%;
}
ul.careerDpts li:nth-child(4) span {
width: 60%;
}
ul.careerDpts li:nth-child(1) span, ul.careerDpts li:nth-child(5) span, ul.careerDpts li:nth-child(6) span {
margin: 0;
}
ul.careerDpts li:hover, ul.careerDpts li:hover:after {
background: #ccc!important;
color: #6190be;
}
ul.careerDpts li:after {
content: "";
display: block;
height: 9.25em;
background: #6190be;
width: .2em;
border-radius: 5px;
position: absolute;
}
ul.careerDpts li:nth-child(1):after {
height: 5.2em;
right: 49%;
bottom: -6em;
}
ul.careerDpts li:nth-child(2):after {
right: 138%;
top: -109px;
transform: rotate(-78deg);
}
ul.careerDpts li:nth-child(3):after {
left: 138%;
top: -109px;
transform: rotate(78deg);
}
ul.careerDpts li:nth-child(4):after {
left: 138%;
bottom: -109px;
transform: rotate(-78deg);
}
ul.careerDpts li:nth-child(5):after {
right: 138%;
bottom: -109px;
transform: rotate(78deg);
}
ul.careerDpts li:nth-child(6):after {
height: 0;
width: 0;
}
ul.careerDpts li:nth-child(1) {
background: #E80719;
top: 0;
left: 36%;
}
ul.careerDpts li:nth-child(2) {
background: #0156EF;
bottom: 0;
right: 0;
}
ul.careerDpts li:nth-child(3) {
background: #EF7700;
bottom: 0;
left: 0;
}
ul.careerDpts li:nth-child(4) {
background: #01AF00;
top: 15%;
left: 0;
}
ul.careerDpts li:nth-child(5) {
background: #7101D2;
top: 15%;
right: 0;
}
ul.careerDpts li:nth-child(6) {
top: 40%;
left: 36%;
color: #6190be;
/* elements revealing effects */
.checkElm {
transition: .5s all linear;
}
.hiddenElm {
opacity: 0;
}
.hiddenElm.checkedElm {
opacity: 1;
}
.revealElm {
opacity: 1;
}
/* elements revealing effects */
/* VM Related */
.browseProductImage {
max-width: 100%;
max-height: inherit;
height: auto;
}
.contentTop .category-view .row .category .spacer h2 a img {
max-width: 125px;
height: auto;
}
.innerRight .xselling h3 {
margin: .3em 0;
}
.topten-view h4, .xselling h3 {
color: #90AF5F;
}
.contentTop block .innerBlock ,.xselling .moduletable h3{
background-color:#8ec640;
color:#fff;
height:25px;
text-align:center;
vertical-align:top;
border-radius:10px;
}
.contentTop block .innerBlock ,.xselling .moduletable h3:before, .xselling .moduletable h3:after{
display:none;
text-align:center;
}
.contentTop block .innerBlock ,.xselling .moduletable .vmgroup{
padding-top:17px;
}
.topten-view {
padding: 0 0 2em 0;
}
.contentTop div.product {
border: none;
position: relative;
}
.contentTop div.vm-details-button {
display: none;
position: absolute;
top: 0;
transition: .3s all linear;
}
.contentTop div.vm-details-button a.product-details {
background: none;
border: 2px solid #fff;
color: #fff;
margin-top: 57%;
}
.contentTop div.product:hover div.vm-details-button {
display: block;
background: rgba(145,176,98,.65);
height: 70%;
width: 100%;
}
.contentTop .vm3pr-0 .addtocart-area {
min-height: inherit;
}
.contentTop .horizontal-separator {
background: #959595;
}
/* vm hom categories layout */
.simple.category-view .category {
max-width: 25%;
margin: .3em 4%;
}
.category-view .category h2 {
padding: .3em 6%;
}
.slider.category-view {
float: left;
width: 100%;
}
.slider.category-view .category {
float: left;
max-width: 25%;
background: rgba(0,0,0,.65);
}
.slider.category-view .category {
}
.slider.category-view .category img {
max-height: 120px;
}
.slider.category-view .category:first-child {
margin-left: 25%;
}
.slider.category-view .category:nth-child(3){
margin-right: 6%;
padding: 0 20% 0 15%;
}
.slider.category-view .category:nth-child(6) {
padding: 0 3%;
}
.slider.category-view .category:nth-child(7) {
padding: 0 3% 0 6%;
margin-right: 20%;
}
.slider.category-view .category:nth-child(8) {
padding: 0 10% 0 10%;
margin-left: 14%;
}
.slider.category-view .category:nth-child(10) {
padding: 0 9% 0 21%;
}
.slider.category-view .category:nth-child(11) {
padding: 0 4% 0 11%;
margin-left: 37%;
}
.slider.category-view .category:last-child {
padding: 0 17% 0 0;
}
.slider.vm-product-descr-container-0 h2 a {
color: #000;
font-size: 1.2em;
}
.slider.vm-product-descr-container-0 {
text-align: center;
}
.breadCr {
color: #ebebeb;
padding: .4em 0;
background: #EBEBEB;
box-shadow: inset 0 0 10px #000;
font-size: 1.3em;
}
.contentTop .breadcrumb {
background: none;
margin: 0;
padding: 0;
color: #ebebeb;
}
.contentTop .breadcrumb li.active span {
color: #90AF63;
}
.contentTop .breadcrumb > li {
}
/* /vm hom categories layout */
/* VM product details */
.contentTop .vm-product-container .vm-product-media-container {
float: right;
width: 40%;
}
.contentTop .vm-product-container .vm-product-details-container {
float: left;
width: 56%;
margin-right: 4%;
}
.vm-product-details-container span.title {
display: block;
width: 100%;
margin-bottom: .5em;
font-size: 1.5em;
color: #000;
}
.product-description {
padding-bottom: 2em;
min-height: 14.3em;
}
.product-description, .product-description span {
color: #000;
font-size: 1em;
line-height: 1.5em;
}
.product-fields {
margin-top: 1em;
background-color:#e5f1d4;
border-radius:12px;
padding-left:10px;
}
.productdetails .product-fields .product-field {
margin: 0;
/*border-bottom: 1px solid #000;*/
}
.product-fields > div span.product-fields-title-wrapper {
float: left;
min-width: 45%;
}
.product-fields > div div.product-field-display {
float: left;
padding: 8px 0;
}
.product-fields > div:first-child {
/*border-top: 1px solid #000;*/
}
.product-fields > div:last-child {
border-bottom: none;
}
.product-fields > div:nth-child(odd) {
background: #e5f1d4;
border-radius:12px;
}
/* VM product details */
.product h2 a {
color: #000;
}
.product .vm-product-descr-container-0 {
text-align: center;
}
.product div.vm-details-button a {
width: 94%;
padding: 11px 3%;
}
.productdetails h1 {
color: #90AF63;
font-size: 1.45em;
font-weight: 700;
text-align: left;
border-top: 2px solid #000;
padding: .5em 0;
}
.innerRight {
padding-top: 1em;
}
/* VM product details */
/* VM Cat sidebar */
.innerRight {
width: 77%;
display: inline-block;
vertical-align: top;
}
最佳答案
@media screen and (min-width: 1081px) {
.slider.category-view .category, .simple.category-view .category {
width: 25%!important;
max-width: 25%!important;
}
}
关于css - Chrome 上的元素更改位置(css)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34304616/