为什么此页面无法在 Internet Explorer 中正确呈现？答案

【问题标题】：Why doesn't this page render correctly in Internet Explorer?为什么此页面无法在 Internet Explorer 中正确呈现？
【发布时间】：2009-12-05 11:39:43
【问题描述】：

看看这个页面： http://labs.pieterdedecker.be/hetoog/layout.htm

在 Firefox 中看起来不错，但 IE 搞砸了。怎么会？

【问题讨论】：

您能准确地说出问题所在吗？我正在使用 IE8，它似乎很好。是它不适合浏览器窗口吗？
你能张贴一张它应该是什么样子的截图吗？这里看起来不错（在 Chrome 4、Opera 10 和 IE 8 上测试）
IE 似乎占用了整个可用宽度 - 这是问题所在吗？
@Amarghosh：是的，这就是问题所在。在 Firefox 中，主要内容的左右两侧有大量空白。

标签： html css internet-explorer rendering

【解决方案1】：

你的布局有点意思。您可以将它们取出并使用

实现居中，而不是在页面的任一侧使用空表格单元格

body {
    width: 750px;
    margin: 0 auto;
}

你的 HTML 可能是这样的：

<body>    
    <table>
        <tr>
            <td class="splash_desc">...</td>
            <td class="splash_photo">...</td>
        </tr>
        ...

使用这种方法，IE 不会比其他浏览器占用更多空间，并且可以很好地放入 750 像素宽的容器中。

编辑：

要使标题栏水平拉伸 100%，您必须为内容创建另一个 div。因此，不要使用 body 元素来设置宽度，而是使用如下内容：

<body>
    <table id="header"><tr>...</tr></table>
    <div id="wrapper">    
        <table>
            <tr>
                <td class="splash_desc">...</td>
                <td class="splash_photo">...</td>
            </tr>
            ...

在 CSS 中：

#wrapper {
    width: 750px;
    margin: 0 auto;
}

这样，您可以将包装器上方的表格设置为 100% 宽（只需设置样式即可），而包装器本身的宽度为 750 像素。

【讨论】：

这行得通，但它破坏了即将成为导航栏（在页面顶部）。如何确保它是 100% 水平拉伸的？

【解决方案2】：

问题是

在 IE6.0 <td>&nbsp;</td> 不支持。

为<td width="20%">&nbsp;</td>指定宽度

和 PNG 图像在 IE6 中不支持。

从http://www.twinhelix.com/css/iepngfix/下载

文件：iepngfix.zip (40kb) 将解决问题

【讨论】：