Question

我的css文件中定义了以下内容：

body  {
    text-align: center;
    float: right;
    position: fixed;
}
.twoColFixRtHdr #container {
    width: 780px;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
}

我的HTML定义如下：

<body class="twoColFixRtHdr">
  <div id="container">
    <div id="header">

问题是，在IE（我已经能够检查的所有版本）中心页面的内容，但在Firefox中，它是左对齐的。我知道text-align：center将使元素的内容居中，而不是元素本身，所以你必须嵌套你的内容，这就是额外div的用途。但我必须忽略IE和Firefox在呈现此标记方面的差异。

有什么想法吗？您可以查看该网站：http://www.solar-fit.ca

Answer 1

你试过这个吗？

#container{
  width: 780px ;
  margin-left: auto ;
  margin-right: auto ;
}

您不应该使用此方法来嵌套div。根据{{3}} ...

“上面的代码已经过测试 IE 6,7，Firefox，Opera和Safari。“

Answer 2

这两个导致问题

身体 - ＆gt; 漂浮：对; 职位：固定;

删除那些

Answer 3

如何将margin: 0px auto;放入正文？

Answer 4

不确定原因，但修复是通过DOCTYPE将IE置于标准模式，例如：

<!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>
<style type="text/css">
    body  {
        text-align: center;
        float: right;
        position: fixed;
    }
    .twoColFixRtHdr #container {
        width: 780px;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left;
    }
</style>
</head>
<body class="twoColFixRtHdr">
  <div id="container">
    <div id="header">
    Some text goes here
    </div>
  </div>
</body>
</html>

Answer 5

从正文规则中删除浮动和位置属性，并添加100％宽度。

body { text-align: center; width: 100% }

使用CSS对齐div

5 个答案: