Question

此页面上的表单http://fashiondevelopmentgroup.com/ 在边栏中，ENJOY OUR FREE NEWSLETTER在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行中，所有输入，textarea和select元素都有50px的margin-top。摆脱它，这样你就可以根据自己的情况单独设计。然后将position:relative添加到提交按钮的父div。然后将position:absolute; top:0;right:0;添加到你的.button类..这也将在firefox中正确对齐按钮。
您将不再需要.button类中的那些边距。使用top：和right中的值：将按钮移动到您想要的位置

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

1 个答案: