网页在 IE7 中(但在 Chrome 或 FF4 中没有)在“jabbrs”div 之后呈现不需要的换行符。
此外，“hi”div 中 h1 标签中的文本没有按应有的方式居中。
我环顾四周并尝试了许多不同的方法，但我似乎无法解决这个问题。
尝试过的解决方案:
- 将文档类型从严格更改为过渡
- 尝试使用文本对齐、额外元素、margin:auto 等。
我在下面附上了我正在处理的代码，如果您想在线查看网页，请询问。我已经删除了 javascript 等所有元素，以便更容易看到设计中发生了什么。
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
body {
background-color:#747E80;
font-family:Arial, Sans-serif;
}
#hi{
font-family:'Pacifico', arial, serif;
margin:0 auto;
text-align:center;
display:inline;
height: 80px;
width:400px;
}
#jabbr_form {
background-color:#F2583E;
padding:5px;
}
#main {
background-color:#77BED2;
width:600px;
margin:0 auto;
padding:5px;
}
#jabbr{
background-color:#FFFFFF;
padding:5px;
width:590px;
overflow: auto;
}
#jabbrs{
height:400px;
}
</style>
<title>jabbr</title>
</head>
<body>
<div id="main">
<br />
<div id="hi"><h1>jabbr away!</h1></div>
<br />
<div id="jabbr">
<div id="jabbrs"><span id="nattr">Nattr-ing with server...</span></div>
</div>
<form id="jabbr_form">
Name: <input type="text" id="author" />
Jabbr: <input type="text" id="msg" autocomplete="off" />
<input type="submit" value="rawr" /><br />
</form>
</div>
</body>
</html>
最佳答案
要修复 h1 居中，请从 #hi 中删除 display: inline。
要修复“jabbrs”div 后不需要的换行符，请添加 margin: 0;缩放:1 到 #jabbr_form。
这是您的原始代码:http://jsbin.com/arivo5/
这是包含两个修复程序的版本:http://jsbin.com/arivo5/2
为什么 zoom: 1 有什么不同？请参阅:What bug does zoom:1; fix in CSS?
关于CSS/IE7 - div 中的文本未居中，div 后有额外的分隔符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6299769/