我有一个我创建的表单，它在所有浏览器中看起来都很棒，除了 Firefox答案

【问题标题】：I have a form I created and it looks great in all browsers but Firefox我有一个我创建的表单，它在所有浏览器中看起来都很棒，除了 Firefox
【发布时间】：2014-05-17 03:53:48
【问题描述】：

我在这个页面上的表格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>

【问题讨论】：

无论如何，您可以将按钮输入与文本输入放在同一个容器中...这会让您放心...请注意您的 IE 正在破坏（如果有的话）
不太确定如何在不破坏表单本身的情况下做到这一点。你在想什么，我怎么会这样移动它？

标签： css firefox

【解决方案1】：

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

【讨论】：

这很好，谢谢克里斯。唯一的问题是，如果您将 firefox 与其他浏览器相比，SIGN UP 按钮比其他浏览器低约 1px。所以你会看到它后面的盒子。