在 IE 兼容模式下表单脱离 div答案

【问题标题】：form falls out of div in IE compatibility mode在 IE 兼容模式下表单脱离 div
【发布时间】：2013-01-09 04:42:44
【问题描述】：

我有一个来自 div 的内部（带边框）。这在 Firefox 和 IE 10 上看起来不错（不确定旧版本的 IE）。但是，有时IE会激活兼容模式，然后表单（输入框和提交按钮）会掉出div。是否有一些 CSS 调整来防止这种情况发生？

我的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>test</title>
  </head>

  <body>
    <div class="box">
       <h2 style="display:inline;">Some sample text</h2>

      <form id="frm">
        <input type="text" id="tb" />
        <input type="submit" class="button" />
      </form>
    </div>
  </body>
  </html>

还有我的css

.box {
  display:block;
  height:40px;
  magin-left:5px;
  padding:5px 0 0 10px;
  width:740px;
  background:green;
  border:1px solid black;
}
h2 {
  margin:0 0 7px;
  padding:0;
  font:1.6em Arial;
  letter-spacing: -1px
}
#tb {
  width:225px
}
.button {
  float:right;
  width:93px;
  margin-left:5px;
  padding:2px 0
}
form {
  float:right;
}
#frm {
  margin-right:10px;
  margin-top:2px;
  width:330px;
}

jsfiddle 的实时示例： http://jsfiddle.net/d3EdW/1/

截图：

【问题讨论】：

标签： css internet-explorer positioning ie8-compatibility-mode

【解决方案1】：

由于您的表单是浮动的，请尝试通过将overflow: auto; 放在表单的父级上来清除它，例如.box。

【讨论】：

这只是隐藏了表单（或 div 之外的表单部分）。但我希望它在有或没有兼容模式的情况下看起来都一样
溢出：自动并不总是隐藏内容；如果内容比容器宽，它允许浏览器选择是否添加滚动条或隐藏内容。这是一种非常酷的清除浮动的方法。也许我误解了“掉线”的样子——你能发个截图吗？
+1 @KatieK 的解决方案是正确的：jsfiddle.net/jonathansampson/d3EdW/4/show
我在原帖中添加了截图。如您所见，输入框和提交按钮不在绿色区域内。在 FF 和没有补偿。模式，他们是。
@Nin 另外，如果站点在 Microsoft 的兼容视图列表中，或者是您亲自在本地浏览器中添加的站点，它们只会出现在兼容视图中。