IE6 - 背景图像丢失，标题中有多余像素，大多数内容偏离中心

Question

我的 WordPress 网站在 IE6 中正确显示时遇到重大问题。

链接到下面的屏幕截图。 我的背景图像丢失了，导航被减少了一些额外的像素，而且我的大部分内容都偏离了中心。

www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg

FF 屏幕截图（链接如下）就是它应该的样子。 已经在 Safari、几个版本的 Firefox 和 IE7 中尝试过，所有的看起来都与预期的一样。 IE6 是唯一给我带来麻烦的。

www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg

有什么想法吗？

链接：www.genevarealtytrust.com/content

我已经验证了我的代码，并尝试了一些方法，但没有成功。

帮助！ 欣赏它！

Answer 1

您可以尝试使用条件样式。 在文档的 head 部分粘贴：

<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->

现在您可以开始编辑 ie.css，而不必担心破坏其他浏览器的设计。

导航周围的额外空间：IE 有时具有与其他浏览器不同的默认边距/填充。 尝试

#something {
margin: 0; 
padding: 0;
}

在新的 css 中显式定义。

没有背景：也许是对齐的原因。 尝试在背景图像定义中添加“左上角”之类的内容。 示例：

background-image: url('../img/site-bg.jpg') no-repeat scroll top right;

内容居中：在 CSS 中，有两种方法可以使内容居中。 第一：设置父元素text-align属性为center;。 第二：定义宽度并将边距设置为top-bottom-margin-value auto;。 示例：

#something {
 width: 100px;
 margin: 10px auto;
}

我希望这将有助于解决您的任何问题:)

Answer 2

这并不是您问题的真正答案（因为我没有足够的代表来发表评论:)），但请尝试运行 此列表常见 IE CSS 错误。 它帮助我解决了 CSS 中的一些问题，但 IE 6 是一个战区。 否则，我真的建议您阅读这本精彩的书防弹网页设计。

Answer 3

谢谢提醒伙计！ Daveslab，我一定会把这份清单放在手边，并感谢您推荐这本书。

居中问题/缺少背景图像：

我制作了备用 css 文档，这给了我更多的实验空间 - 我能够通过稍微简化 CSS 来解决有问题的 CSS 缺失和居中问题部分通过反复试验。 （删除了浮动、位置...）

额外像素：

最终修复了标题底部的 3 个像素...真是太愚蠢了。

显然 IE6 在标题图像的底部应用了额外的 3 个像素，因为该 div 的 html 代码被分成 3 行...

<div id="header">
<img src="url" />
</div>

我只需将它们全部组合成一行，底部的额外填充就消失了。 愚蠢...（而且丑陋）

<div id="header"><img src="url" /></div>

我在右侧仍然有一个额外的像素，我正在尝试解决它 - 仍在调查。