Question

我使用html和css设计了一个登录表单。样式在chrome和firefox中正确显示。但在IE中它有一些问题。

HTML

<div id="wrapper">
<div id="page">
    <form id="adminLoginForm">
        <label>User Name :</label>
        <input type="text" class="uname"/>
        <label>Password :</label>
        <input type="password" class="pwd"/>
        <input type="submit" class="loginSubmit submit" value="SUBMIT"/>
        <p class="alert loginAlert">Test alert</p>
    </form>
</div>
</div>

CSS

#wrapper{
    width:1000px;
    margin:0 auto;
}
p{
    margin:0;
    padding:0;
}
#page{
    float: left;
    width: 1000px;
    min-height: 480px;
    background-color: #FFFFFF;
    padding-bottom:20px;
}
.submit{
    float:left;
    width: 130px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    cursor: pointer;
    height:30px;
    background: url('/img/bg/submit.jpg');
    border: none;
    border-radius: 10px;
    color: #960000;
}
.alert{
    float: left;
    width: 100%;
    margin-top: 5px;
    color: #C00;
    display:none;
}
#adminLoginForm{
    float: left;
    width: 350px;
    height: 170px;
    margin-left: 325px;
    margin-top: 150px;
    background: url('/img/bg/b15.jpg');
    border-radius: 10px;
    box-shadow: 0px 0px 10px #A38D77;
    padding-top: 10px;
}
#adminLoginForm label{
    float: left;
    width: 150px;
    text-align: right;
    font-weight: bold;
    color: #000000;
    font-size: 15px;
    margin-top: 20px;
}
#adminLoginForm input{
    float: left;
    width: 150px;
    margin-top: 19px;
    margin-left: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
#adminLoginForm input.loginSubmit{
    width:130px;
    margin-left:111px;
}

Chrome＆amp;火狐 chrome

IE中的输出

我知道border-radius和box-shadow在IE中不起作用。但我不知道为什么IE中的标签和文本框之间存在差距。任何人都可以帮我解决这个问题吗？

Answer 1

如果您将表单的内容包装在div中，然后该div成为表单的唯一子项，则问题已解决：

<强> HTML：

<form id="adminLoginForm">
    <div>
        <label>User Name :</label>
        <input type="text" class="uname"/>
        <label>Password :</label>
        <input type="password" class="pwd"/>
        <input type="submit" class="loginSubmit submit" value="SUBMIT"/>
        <p class="alert loginAlert">Test alert</p>
    </div>
</form>

我想到了这一点，因为我记得（早在看似XHTML将成为新的网络标准的时候），使用 XHTML ，本机内联元素（如<label>和{ {1}}）不是<input>元素的有效子元素。

我不认为常规 HTML 就是这种情况，但重点是<form>标记和各种<form>元素相当特殊，并倾向于遵循自己的CSS格式规则。

Answer 2

尝试将表格模式用于这些类型的设计..所有浏览器的最佳兼容性技巧..

<div id="wrapper">
<div id="page">
    <form id="adminLoginForm">
    <table>
        <tr><td><label>User Name :</label></td><td><input type="text" class="uname"/></td></tr>
        <tr><td><label>Password :</label></td><td><input type="password" class="pwd"/></td></tr>
        <tr><td colspan="2" style="text-align:center;"><input type="submit" class="loginSubmit submit" value="SUBMIT"/></td></tr>                        
    </table>
        <p class="alert loginAlert">Test alert</p>
    </form>
</div>
</div>

IE中的CSS问题

2 个答案: