Question

网页在IE7中的“jabbrs”div之后呈现不需要的换行符（但不在Chrome或FF4中）。

另外，“hi”div中h1标签中的文字不应该居中。

我环顾四周并尝试了许多不同的东西，但我似乎无法解决这个问题。

尝试解决方案：

将doctype从严格更改为过渡
玩文字对齐，额外元素，边距：自动等等。

如果您想在线查看网页，请附上我正在处理的代码。我已经删除了所有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>

Answer 1

要解决h1居中问题，请从display: inline移除#hi。

要修复“jabbrs”div之后的“不需要的换行符”，请将margin: 0; zoom: 1添加到#jabbr_form。

以下是您的原始代码：http://jsbin.com/arivo5/

这是一个包含两个修复程序的版本：http://jsbin.com/arivo5/2

为什么zoom: 1会有所不同？请参阅：What bug does zoom:1; fix in CSS?

Answer 2

如上所述，IE 7中有两个相对较小的问题......

#hi内的文字未居中。
#jabbr之后的额外行。

通常可以通过修复尝试验证代码时可能发现的任何内容来解决这种小的渲染问题。

http://validator.w3.org

Answer 3

中心添加此...

#hi > h1 {
    text-align: center;
}

或尝试......

#hi > h1 {
    margin: 0 auto;
}

IE并不总是与CSS的级联部分相配得很好

对于换行符，有时IE会将html中的回车符解释为文字回车符，因此请点击F12开发人员工具，查看是否在页面上输入了换行符。

CSS / IE7 - div中的文本不居中，div后的额外中断

3 个答案: