Question

我在IE，Chrome，Safari，Opera和Firefox中测试过我的网站是唯一一个提出此问题的网站。

正如您所看到的，免责声明的定位是混乱的，以及图像的位置和高度。

全屏断开后，大多数问题都会消失，但左/右边距仍然不对。 .top-opt-in没有什么不同，唯一的区别在于按钮;它从display：block切换到display：在第一次中断时内联。

<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 {position：relative; } .element {position：absolute; }
改变边距直至看起来正确
更改显示：内联;显示：inline-block;

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

1 个答案: