html - Firefox 负边距和最大宽度大于 100% 的问题

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 行 anchor 标记内图像的 margin-left 需要设置为 0。

你可以这样做:

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

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