与边距和 img 大小相关的 Firefox 特定 CSS 错误

Question

我已经在 IE 中测试了我的网站，Chrome、Safari、Opera 和 Firefox 是唯一出现此问题的。

如您所见，免责声明的位置以及图片的位置和高度都乱七八糟。

全屏中断后，大多数问题都消失了，但 left/right 边距仍然不正确。 .top-opt-in 没有区别，唯一的区别在于按钮；它从 display: block 切换到 display: inline 在第一次中断时。

<div>
    <div class="top-opt-in-left"></div>
    <section class="top-opt-in center-block text-center">

        <div class="top-cta">
            ENTER YOUR EMAIL BELOW <span>to find out when Let's Do Lunch comes to you!</span>
        </div>
        <div class="top-opt-in-fields">
            <input class="email-field" id="email" type="text" placeholder="Enter Email Address" />                
            <img class="top-opt-in-button" id="top_submit"  />
            <label class="disclaimer">We hate spam as much as you! Unsubscribe anytime.</label>
        </div>

    </section>
</div>

.top-opt-in {    
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative;
}
/* Full Screen */
@media (min-width:1175px) {
    .top-opt-in {
        background-image: url(../images/top_optin_ribbon_full.png);
        height: 171px;
    }
}

.top-opt-in-button {
    /*display: block;*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;
}
/* Full Screen */
@media (min-width:1175px) {
    .top-opt-in-button {
        background-image: url(../images/top_join_button_full.png);
        width: 212px;
        padding-left: 212px;
        height: 82px;
        display: inline;
        margin: auto auto;        
    }
}

.top-opt-in-fields label {
    display: block;
    font-family: FreeSans;
    color: #fffffd;
    font-size: 1em;
}
/* Full Screen */
@media (min-width:1175px) {
    .top-opt-in-fields label {
        margin-top: -1.75em;
        margin-left: -17.2em;
    }
}

Answer 1

最终不得不创建一堆特定于 Firefox 的 css 规则，但已完全解决此问题。如果其他人遇到这个问题，我是如何解决的：

将 Firefox 特定项目放入

@-moz-document url-prefix() { }

然后尝试混合使用以下方法，直到能够解决所有问题

.wrapper { 位置：相对； } .element { 位置：绝对； }
改变边距直到看起来正确
更改显示：内联；显示：内联块；

与边距和 img 大小相关的 Firefox 特定 CSS 错误

Firefox specific CSS bug related to margins and img sizing

html

css

firefox