Question

这是一个令人尴尬的基本问题，但我一直在绞尽脑汁试图找到解决办法，最后挫折感对我来说太过分了......

我所要做的就是将网站置于IE7中心。它适用于Firefox，Safari，IE8和Chrome。只是没有IE7：

#container
{
    margin:0 auto;
    width:1035px;
}

我只是看不出这怎么可能出错。我已经尝试过严格的和过渡性的doctypes，我也把身体放在text-align：center中（没有区别）。

将非常感激地收到有关此事的任何建议。

好的，这是（某些）周围的代码：

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

</head>
<body>

    <div id="container">

        <div id="content-container">
            <div id="content">

                /* content */               

            </div>

        </div>
    </div>
</body>
</html>

CSS（主要）：

html,body
{
    text-align: center;
    background-color:#F8F5EF;
    height:100%;
    margin:0;
    padding:0;
    width:100%;

}

#container
{
    margin: 0 auto;
    width:1100px;
}

#content-container
{
    float: left;
    width: 1100px;
    background-image:url('../images/BG1.gif');
    background-repeat:no-repeat;
    background-position:0px 0px;    
}

#content
{
    float: left;
    width: 778px;
    padding: 15px 0px 80px 15px;
    margin: 0 0 60 0px;

}

IE7.css文件不会修改这些项目。

谢谢！

Answer 1

如果没有发布您周围的HTML / CSS，我们就无法提供帮助，因为此代码适用于所有IE（刚刚测试过）

Live Example

这让我相信你有影响风格的东西。如果您可以展示或提供链接，我认为可以提供更多帮助。

以下是使用的CSS：

#content {
    width:     100px;
    margin: 0 auto;
    border: 1px dashed red;
}

使用的HTML：

<div id="content">
        content here
    </div>

使用您提供的css / html更新代码：

http://jsfiddle.net/hyVjs/2/

这段代码很好。你的一个子css文件弄乱了你：）

您是否尝试删除条件css文件并查看它是否仍然有效？

Answer 2

确保已设置DOCTYPE。如果不是IE将启用怪癖“脏模式”

Answer 3

text-align用于对齐文本...

在ie7中

确保你给父容器一个除auto之外的宽度然后一切都应该好。

Answer 4

您可以尝试为容器执行此操作：

#container {
   position: absolute;
   margin:0 0 0 50%;
   width:1100px;
   left: -550px; /*half the element width*/
}

如果上述情况不符合您的需求，请尝试position:relative;

我发现在没有别的情况下使用IE7的百分比边距。虽然自动边距似乎有时会起作用 - 但在IE7下，jsFiddle中的代码似乎很好。

需要向左移动负向位置以使元素从左边缘居中。

Answer 5

如果容器是DIV，那么

#container
{
    margin:0 auto 0 auto;
    position:relative;
    width:1035px;
}

如果不起作用，请先使用css-reset。它肯定会奏效。

Answer 6

尝试使用

display:block;

表示容器

Answer 7

是的，如果我打算将一个容器放在中心位置，我通常text-align:center;身体并在容器内部对齐以便向后兼容。老习惯我有一天会杀人。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>a box</title>
        <style>
            body { text-align:center; }
            #wrap { width:36em; padding:2em; margin:1em auto; text-align:left; background:#eee; }
        </style>
    </head>
    <body>
        <div id="wrap">&hellip;</div>
    </body>
</html>

无法在IE7中心站点

7 个答案: