0

我已经使用 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 和 Firefox 中输出 铬合金

IE中的输出
IE

我知道border-radius并且box-shadow在 IE 中不起作用。但我不知道为什么 IE 中的标签和文本框之间存在差距。谁能帮我解决这个问题..？

4

2 回答 2

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 似乎将成为新的 Web 标准的时代），对于XHTML，本机内联元素（如<label>和<input>）不是该元素的有效子<form>元素。

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

于 2012-08-08T09:36:15.237 回答
0

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

<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>
于 2012-08-08T09:39:34.293 回答