Question

“必需”文本显示在输入框的左侧。 Opera中的类似问题除了显示在下一行（创建换行符）。在FF3.1和chrome中看起来如预期。有什么建议？最后，我想在'required'范围内使用display：none属性，并根据需要使用javascript显示此范围。

<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有时会让我讨厌网络开发。

Answer 1

您可能应首先在文件顶部添加正确的DocType标记。

编辑：查看代码后，您似乎没有正确使用浮动代码。首先关闭 - //不会在CSS文件中注释掉行。您需要将其包装在/* and */中以对其进行评论。因此，您的SPAN.formw样式向右浮动，位于您的SPAN.required之前，它也会向右浮动。由于您使用的是SPAN标记，因此您实际上不需要在此处浮动任何内容。如果你删除所有这些，它应该适合你。

Answer 2

您使用的是哪种doctype？一个严格的可以防止这种问题......而且，我通常用重置文件开始我的CSS设计，以摆脱所有这些烦恼：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 3

使用双斜杠“//”无效的CSS评论。所以这个浮动权利规则：

div.row span.formw { // float: right;

正在应用。

使用：

/* comment */

评论CSS时。

Answer 4

把一个浮动：放在formW类

上

Answer 5

将行中的所有框浮动到左侧，而不是混合浮动和内联元素：

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;
  }

Answer 6

jriggs，因为IE8仍然不是完全稳定的，对于某些项目你可以让IE8恢复到IE7渲染规则。其中一个好处是，这不会为用户提供位置栏右侧的兼容性视图按钮。

有关详细信息和详细信息，请参阅 http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

html在IE8中不显示相同内容

6 个答案: