html在IE8中不顯示相同

'required'文本顯示在輸入框的左側。 Opera中的類似問題除了顯示在下一行（創建換行符）之外。在FF3.1和chrome中看起來如預期的那樣。有什麼建議麼？最終我想在'required'範圍內使用display：none屬性，並根據需要使用javascript顯示此範圍。html在IE8中不顯示相同

<html> 
<head> 
<title></title> 

<style type="text/css"> 
<!-- 
input.missing { background-color: #FFFF77; } 

div.row { 
    clear: both; 
    padding-top: 5px; 
    } 

div.row span.label { 
    float: left; 
    width: 100px; 
    text-align: right; 
    } 

div.row span.formw { 
// float: right; 
    width: 235px; 
    text-align: left; 
    padding-right: 0px; 
    padding-left: 45px; 

    } 

div.spacer { 
    clear: both; 
} 

.container{ 
    width: 425px; 
    background-color: #ccc; 
    border: 1px dotted #333; 
    padding: 5px 5px 5px 5px; 
margin: 0px auto; 
} 

.error{ 
    color: #ff0000; 
    } 

.required{ 
    color: #ff0000; 
    float: right; 
// display:none; 
// display:inline; 
    } 
--> 
</style> 
</head> 
<body> 
<div id="contact_form"> 
<form action="/jr/index.php" method="POST" id="contact"> 

<div id="top_message" style="width: 360px; margin: 10px auto;"> 
Enter Your Information Below</div> 


<div class="container"> 

    <div class="row"> 
     <span class="label">Name:</span> 
     <span class="formw"><input size="30" maxlength="30" name="name" id="name" value=""></span> 
    </div> 

    <div class="row"> 
     <span class="label">Email:</span> 
     <span class="formw"><input size="30" maxlength="30" name="email" id="email" value=""></span> 
     <span id="email_error" class="required">(required)</span> 
    </div> 

    <div class="row"> 
     <span class="label">Shoe size:</span><span 
class="formw"><input type="text" size="25" /></span> 
    </div> 
    <div class="row"> 
     <span class="formw"> 
     <input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span> 
    </div> 
    <div class="spacer"> 
    &nbsp; 
    </div> 

</div> 

<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>   

</form> 
</div> 
</body> 
</html>

IE有時候真的讓我討厭web dev。

來源

2009-12-16 jriggs

您可能應該首先在文件頂部添加適當的DocType標記。

編輯：查看你的代碼後，看起來你沒有正確使用你的浮動。首先 - //不會註釋掉CSS文件中的行。您需要將其包裝在/* and */中以對其進行註釋。所以你的SPAN.formw風格是漂浮在右邊，這是在你的SPAN.required之前，這也是正確的。由於您使用的是SPAN標籤，因此您確實無需在此處浮動任何內容。如果你刪除所有這些，它應該適合你。

來源

2009-12-16 16:58:56

謝謝，這令人驚訝定了！我用過渡btw。 – jriggs 2009-12-16 17:06:51

並不奇怪;）如果沒有文檔類型，IE將以Quirks模式運行，這只是一團糟。 – 2009-12-16 17:10:12

好點......... – AJM 2009-12-16 17:11:25

您正在使用哪種文件類型？嚴格的一個可以防止這樣的問題......另外，我通常開始我的CSS設計復位文件擺脫所有煩惱樣的：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

來源

2009-12-16 16:59:29 Wookai

+1提及的Meyer CSS重置文件，必須愛它:) – 2009-12-16 17:15:22

把一個float：留在formW類

來源

2009-12-16 17:06:12 AJM

浮動所有的箱子排至左邊，而不是混合浮動和內聯元素：

div.row span.label { 
    float: left; 
    width: 100px; 
    text-align: right; 
    } 

div.row span.formw { 
    float: left; 
    width: 235px; 
    padding-left: 45px; 
    } 

.required{ 
    float: left; 
    color: #ff0000; 
    // display:none; 
    }

來源

2009-12-16 17:07:43 Guffa