Question

以下是代码：

<div id="regpage">
     <form action="" method="post">
      <fieldset style="border:none;">
      <div class="label">Username:</div> <input type="text" name="username" class="item" value="" /><br />
      <div class="caption">Must be 5-15 characters</div><br />
      <div style="clear:both;"></div>
      <div class="label">Password:</div> <input type="password" name="password" class="item" value="" /><br />
      <div class="caption">Must be 6-20 characters</div><br />
      <div style="clear:both;"></div>
      <div class="label">Email:</div> <input type="text" name="email" class="item" value="" /><br />
      <div class="caption">Valid email address is required</div><br />
      <div style="clear:both;"></div>
      <input name="terms" type="checkbox" id="terms" value="agree" /><div class="caption2"><label for="terms">I agree to the terms and conditions</label></div>
      <p><input type="submit" name="register" value="Register" id="register" style="float:left;border:1px solid #999;background:#E4E4E4;margin-top:5px;" /></p><br />
     </fieldset>
     </form>
</div>

id“regpage”在style.css中被定义为：

#regpage {

  width: 356px;

  height: 150px;

  color: #000000;

  font-family: "Tahoma", Arial, Helvetica, sans-serif;

  font-size: 13px;

}

如果我移动<div id="regpage">的复选框OUT，它就可以了。但内部不会在Mozilla中进行交互。我甚至尝试添加onclick='this.checked="checked"'，但仍然无法互动。你可以点击直到你脸上的蓝色，什么都不会发生。

这是什么交易！这真的让我很沮丧。

Answer 1

我没有看到任何问题：http://jsfiddle.net/cXRPd/（Firefox 3.0.19）

Answer 2

自己找到了：我的div高度不够高。它没有扩展到足以覆盖复选框。

将高度设置为250可解决问题。

我的溢出被设置为隐藏，但显然它仍然阻止了与盒子交互的能力。

无法与FireFox或Chrome中的复选框进行互动。适用于IE

2 个答案: