Firefox

Question

我一直在构建登录表单，一切都很顺利，直到我打开Firefox并试用它。您输入的文字甚至不会显示在Chrome和IE中。

无论如何，这里是用于登录的CSS：

#login-wrapper{
    display:none;
    overflow:hidden;
    text-align:left;
    color:#fff;
    background-color:#378f90
}

#login-wrapper .item-list,#login-wrapper h2,#login-wrapper label{
    display:none
}

#login-wrapper #edit-actions,#login-wrapper .form-actions,#login-wrapper .form-item{
    margin:0
}

#login-wrapper input,#login-wrapper input:focus,#login-wrapper textarea,#login-wrapper textarea:focus{
    margin:1.25rem 0;
    padding:1.875rem 0 2.5rem;
    line-height:1.75rem;
    font-size:1.5rem;
    font-weight:300;
    color:#fff;
    background-color:transparent;
    border:none;
    border-bottom:1px solid #fff;
    box-shadow:none;
    resize:none
}

#login-wrapper textarea,#login-wrapper textarea:focus{
    padding-bottom:1.25rem;
    padding-top:.9375rem
}

#login-wrapper input.placeholder,#login-wrapper input:focus.placeholder,#login-wrapper textarea.placeholder,#login-wrapper textarea:focus.placeholder{
    color:#fff
}

#login-wrapper input:-moz-placeholder,#login-wrapper input:focus:-moz-placeholder,#login-wrapper textarea:-moz-placeholder,#login-wrapper textarea:focus:-moz-placeholder{
    color:#fff
}

#login-wrapper input::-moz-placeholder,#login-wrapper input:focus::-moz-placeholder,#login-wrapper textarea::-moz-placeholder,#login-wrapper textarea:focus::-moz-placeholder{
    color:#fff
}

#login-wrapper input:-ms-input-placeholder,#login-wrapper input:focus:-ms-input-placeholder,#login-wrapper textarea:-ms-input-placeholder,#login-wrapper textarea:focus:-ms-input-placeholder{
    color:#fff
}

#login-wrapper input::-webkit-input-placeholder,#login-wrapper input:focus::-webkit-input-placeholder,#login-wrapper textarea::-webkit-input-placeholder,#login-wrapper textarea:focus::-webkit-input-placeholder{
    color:#fff
}

#login-wrapper textarea{
    overflow:hidden;
    word-wrap:break-word
}

#login-wrapper input[type=submit]{
    float:right;
    display:table-cell;
    vertical-align:middle;
    margin:1.25rem 0;
    padding:0 0 0 1.25rem;
    width:4.375rem;
    height:4.375rem;
    line-height:1.5625rem;
    font-size:1rem;
    font-weight:500;
    text-align:left;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    background-image:url(../images/icon-login-big.jpg);
    cursor:pointer;
    -webkit-border-radius:.1875rem;
    -moz-border-radius:.1875rem;
    border-radius:.1875rem
}

Answer 1

我认为这个问题只是因为#login-wrapper到display: none

我已更新fiddle

上的代码

#login-wrapper{
/*    display:none;*/
    overflow:hidden;
    text-align:left;
    color:#fff;
    background-color:#378f90
}

#login-wrapper .item-list,#login-wrapper h2,#login-wrapper label{
    display:none
}

#login-wrapper #edit-actions,#login-wrapper .form-actions,#login-wrapper .form-item{
    margin:0
}

#login-wrapper input,#login-wrapper input:focus,#login-wrapper textarea,#login-wrapper textarea:focus{
    margin:1.25rem 0;
    padding:1.875rem 0 2.5rem;
    line-height:1.75rem;
    font-size:1.5rem;
    font-weight:300;
    color:#fff;
    background-color:transparent;
    border:none;
    border-bottom:1px solid #fff;
    box-shadow:none;
    resize:none
}

#login-wrapper textarea,#login-wrapper textarea:focus{
    padding-bottom:1.25rem;
    padding-top:.9375rem
}

#login-wrapper input.placeholder,#login-wrapper input:focus.placeholder,#login-wrapper textarea.placeholder,#login-wrapper textarea:focus.placeholder{
    color:#fff
}

#login-wrapper input:-moz-placeholder,#login-wrapper input:focus:-moz-placeholder,#login-wrapper textarea:-moz-placeholder,#login-wrapper textarea:focus:-moz-placeholder{
    color:#fff
}

#login-wrapper input::-moz-placeholder,#login-wrapper input:focus::-moz-placeholder,#login-wrapper textarea::-moz-placeholder,#login-wrapper textarea:focus::-moz-placeholder{
    color:#fff
}

#login-wrapper input:-ms-input-placeholder,#login-wrapper input:focus:-ms-input-placeholder,#login-wrapper textarea:-ms-input-placeholder,#login-wrapper textarea:focus:-ms-input-placeholder{
    color:#fff
}

#login-wrapper input::-webkit-input-placeholder,#login-wrapper input:focus::-webkit-input-placeholder,#login-wrapper textarea::-webkit-input-placeholder,#login-wrapper textarea:focus::-webkit-input-placeholder{
    color:#fff
}

#login-wrapper textarea{
    overflow:hidden;
    word-wrap:break-word
}

#login-wrapper input[type=submit]{
    float:right;
    display:table-cell;
    vertical-align:middle;
    margin:1.25rem 0;
    padding:0 0 0 1.25rem;
    width:4.375rem;
    height:4.375rem;
    line-height:1.5625rem;
    font-size:1rem;
    font-weight:500;
    text-align:left;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    background-image:url(../images/icon-login-big.jpg);
    cursor:pointer;
    -webkit-border-radius:.1875rem;
    -moz-border-radius:.1875rem;
    border-radius:.1875rem
}

<div id="login-wrapper">
    <div>
        <input type="text" value="test" />
    </div>
    <div>
        <textarea>test area</textarea>
    </div>
</div>

Answer 2

我只需要改变

自： 填充：1.875rem 0 2.5rem;

于： 填充：1.875rem 1 2.5rem;

感谢您的支持：）