Question

我有一个代码：

<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
    <div id="main_body"></div>
</body>
</html>

关闭style.css：

* {
    margin: auto;
    padding: 0;
}
#main_body {
    width: 568px;
    text-align: left;
    height: 295px;
    background: url(../images/form_BG.png) no-repeat left; 
}

当我运行firefox时结果是： enter image description here

但是当在IE中运行结果错误显示在左侧时，不会在中心显示为firefox enter image description here

Answer 1

margin:auto在IE中效果不佳。您可以使用包含样式#main_body的另一个div包装text-align:center div。但这将使所有文本居中对齐#main_body。因此，在text-align中添加另一个#main_body属性以覆盖。

即。更改#main_body，如：

<div style="text-align:center">
   <div id="main_body"></div>
</div>

如果您不希望#main_body中的文本居中对齐，请更改css，如：

#main_body
{
   width: 568px;
   text-align: left;
   height: 295px;
   border:1px solid red;
   margin:auto;
   text-align:left;
}

Answer 2

试试这个：

div {
margin: auto;
padding: 0;
}
#main_body {
width: 568px;
text-align: left;
height: 295px;   background: url(../images/form_BG.png) no-repeat left;    }

在所有浏览器中工作

Answer 3

只需在页面中添加Doctype，例如，对于Transitional XHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或HTML5：

<!DOCTYPE html>

对于XHTML，最好更改＆lt; html＆gt;打开标签：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Answer 4

* {
margin: auto;
padding: 0;
}

body { text-align: center; }

#main_body {
width: 568px;
margin:0 auto;
text-align: left;
height: 295px;
background: url(../images/form_BG.png) no-repeat left; 
}

body标签中的text-align属性将使IE中的#main_body div居中，然后#main_body选择器内的text-align属性将重置#main_body中的文本对齐

Answer 5

添加此css：

#main_body {
    width: 568px;
    text-align: left;
    height: 295px;
    background: url(../images/form_BG.png) no-repeat; 
    margin: auto; 
}

在下面的图像中查看上述css的结果

火狐： enter image description here

IE：

enter image description here

错误在所有IE中显示html表单

5 个答案: