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