IE中的CSS問題

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

輸出在IE

我知道在IE中border-radius和box-shadow不工作。但是我不知道爲什麼IE中的標籤和文本框之間存在差距。任何人都可以幫我解決這個問題..？

Answer 1

如果包裹在一個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格式規則。

Answer 2

嘗試使用表模式爲這些類型的所有瀏覽器兼容性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>