我在 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/
截图:
最佳答案
由于您的表单是 float 的，请尝试通过将 overflow: auto; 放在表单的父级上来清除它，例如 .box。
关于css - 在 IE 兼容模式下 form 脱离 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14223297/