IE中的CSS问题

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

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 &火狐 chrome

输出在IE

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

来源

2012-08-08 vinu

你知道，有不同版本的IE，对不对？所以，如果你告诉我们，你正在使用哪一个可能会有帮助！？ – Amberlamps 2012-08-08 09:35:23

将'display：inline'添加到标签 – 2012-08-08 09:35:50

@Amberlamps正在使用IE版本8. – vinu 2012-08-08 09:40:45

如果包裹在一个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-08 09:36:15 Faust

谢谢@Faust。问题解决了 – vinu 2012-08-08 09:44:54

尝试使用表模式为这些类型的所有浏览器兼容性designs..best招..

<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-08 09:39:34 kakarott

IE中的CSS问题

回答

相关问题