css - 我有一个我创建的表单，它在除 Firefox 之外的所有浏览器中看起来都很棒

Question

我在这个页面上的表格 http://fashiondevelopmentgroup.com/ 在边栏中享受我们的免费新闻在 Firefox 中看起来不正确。其他地方都很好。有没有办法编写特定于 Firefox 的 CSS 来解决这个问题？ 我已经使用 -moz-margin-start 来设置水平 css，但是 Firefox 是否有特定的垂直代码？ 谢谢， 布莱恩

这是我的代码:

input, textarea, select {
    vertical-align: middle;
    color: #889291;
    margin-left: 20px;
    margin-top: 50px;
}
.button {
    display: inline-block;
    margin-left: 200px;
    margin-top: -55px;
    color: #fff;
    background-color: #889291;
    -moz-margin-start:67%; 
    -webkit-margin-start:70%;
}

HTML:

<div id="optin">
    <form action="http://fashiondevelopmentgroup.us2.list-manage1.com/subscribe/post?                             u=1eed93a2e1bb3dc00d80e42af&id=25ea8ae595"; method="post" id="mc-embedded-subscribe-form"    name="mc-embedded-subscribe-form" class="validate" target="_blank" style="background-   image:url('HERE IS WHERE YOU WILL PUT THE LINK TO YOUR IMAGE THAT YOU    UPLOADED');background-repeat: no-repeat; width:300px; height:151px;" novalidate>
        <input type="email" size="30" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
        <div class="clear">
            <input type="submit" value="SIGN UP" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
    </form>
</div>

Answer 1

在您的 my_style.css 第 8 行中，您为所有输入、文本区域和选择元素设置了 50 像素的顶部边距。摆脱它，这样您就可以根据自己的情况单独设置样式。 然后将 position:relative 添加到提交按钮的父 div 中。然后添加 position:absolute; top:0;right:0; 到你的 .button 类..这也会在 firefox 中正确对齐按钮。
您将不再需要 .button 类中的那些边距。使用 top: 和 right: 中的值将按钮准确移动到您想要的位置