Question

我为我的Wordpress主题制作了自定义代码，我认为边距和/或最大宽度大于100％会导致Firefox溢出并显示水平滚动条。 Chrome可以很好地呈现网站（这里是网站：http://bit.ly/1zXIxd5）

这是导致问题的部分（我认为）

@media all and (min-width: 800px) {
#content img {max-width: 157.5%; height: auto; margin-left: -28.5%;}
#okv {width: 157%; margin-left: -28.5%;}
#okp {width: 80%; margin: 5% 10% 5% 10%;}
.post .featured-image {margin-left: 28.5%;}
}

所以如果有人知道解决这个问题的方法，请告诉我。如果您需要，请点击我的完整自定义代码。

.header {
position: relative;
width: 100%;
display: inline-block;
padding: 2.3% 2% 0% 2%;
text-align: center;
}

.post .post-content {font: 17px/1.6 sans-serif;}

@media all and (max-width: 799px) {
#content img {max-width: 100%; height: auto;}
#okv {width: 100%; margin-left: 0;}
#okp {width: 100%; margin: 0 auto;}
.post .post-content {font: 14px/1.6 sans-serif;}
.post .featured-image {margin-left: 0;}
}

@media all and (min-width: 800px) {
#content img {max-width: 157.5%; height: auto; margin-left: -28.5%;}
#okv {width: 157%; margin-left: -28.5%;}
#okp {width: 80%; margin: 5% 10% 5% 10%;}
.post .featured-image {margin-left: 28.5%;}
}

.nav a {font-family: Arial, Helvetica, sans-serif;}

h2 {font-family: Arial, Helvetica, sans-serif;}

.post .more-link:hover span {background: #e34234;}

p.wp-caption-text {text-align: center; font: 13px/1.6 sans-serif;}

p.mtx {font: 10px/1.6 sans-serif;}

.post .more-link span {background: #f6f6f6; border-radius: 3px; padding: 6px 23px;}
.entry-title {font-weight: bold;}
.twentytwenty-handle {top: -50%;}
.twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-horizontal .twentytwenty-handle:before {width: 1px;}

.intro {display: inherit;}

.comments-wrap {
    width: 65%;
    margin: 0px auto;
    padding: 4% 0px;
    font-size: 0.9em;
}

Answer 1

第178行锚标记内图像上的左边距需要设置为0。

你可以这样做：

.post .featured-image {
    margin-left: 0 !important;
}

.post .featured-image img {
    margin-left: 0 !important;
}

Firefox负边距和最大宽度大于100％的问题

1 个答案: