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

Question

我有一個來自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/

屏幕截圖：

Answer 1

由於您的表格是浮動的，請嘗試通過以下方式清除它overflow: auto; 在表單的父級上，例如.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