1

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

我要做的就是在 IE7 中将网站居中。它在 Firefox、Safari、IE8 和 Chrome 中运行良好。只是不是IE7：

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

我只是看不出这怎么会出错。我已经尝试过严格和过渡的文档类型，我还将正文放在 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 文件不会修改这些项目。

谢谢！

G

4

7 回答 7

2

如果不发布您周围的 HTML/CSS，我们将无能为力，因为此代码适用于所有 IE（刚刚测试）

现场示例

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

这是使用的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 文件并查看它是否仍然无法正常工作？

于 2011-02-24T10:36:01.793 回答
2

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

于 2011-09-19T21:24:38.477 回答
1

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

在 ie7 中确保你给父容器一个宽度而不是 auto 那么一切都应该很好。

于 2011-02-24T10:26:00.167 回答
1

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

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

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

我发现使用百分比边距适用于 IE7，而没有其他方法。虽然有时自动边距似乎有效 - 您在 jsFiddle 中的代码在 IE7 下似乎很好。

需要向左负定位才能带回从左边缘居中的元素。

于 2011-08-25T08:09:37.033 回答
0

是的，如果我要使容器居中，我通常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>
于 2011-02-24T10:37:11.567 回答
0

如果容器是 DIV 则

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

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

于 2011-02-24T10:24:41.160 回答
0

尝试使用

display:block;

对于容器

于 2011-02-24T10:24:51.893 回答