表单在IE兼容模式下超出div

Question

I have a from inside a div (with a border). 我有一个来自div（带边框）的内部。 This looks good on Firefox and IE 10 (not sure about older versions of IE). 在Firefox和IE 10上看起来不错（不确定IE的旧版本）。 However, sometimes IE activates the compatibility mode and then the form (input box and submit button) fall out of the div. 但是，有时IE会激活兼容模式，然后表单（输入框和提交按钮）会脱离div。 Is there some css tweak to prevent this? 是否有一些CSS调整可以防止这种情况？

My HTML: 我的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>

and my css 和我的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;
}

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

Screenshot: 屏幕截图：

Answer 1

Since your form is floated, try clearing it by putting overflow: auto; 由于您的表格是浮动的，请尝试通过以下方式清除它overflow: auto; on a parent of the form, such as .box . 在表单的父级上，例如.box 。

表单在IE兼容模式下超出div

问题描述

1 个解决方案

解决方案1
1 2013-01-08 20:20:59

表单在IE兼容模式下超出div

问题描述

1 个解决方案

解决方案1 1 2013-01-08 20:20:59

解决方案1
1 2013-01-08 20:20:59