html - 只有 Chrome 破坏了我的网站格式

Question

我的爱好者网站可以在 http://www.488.cyberpictures.net 找到- 它只是与记事本和版本 4 的 HTML 程序员引用放在一起。我不是网页设计细节方面的专家，任何使用的例程都已通过谷歌搜索找到。因此，当我遇到问题时，我必须请教社区专家。

我使用 IE 和 Firefox 检查输出并验证编码，一切看起来都很好，直到我使用 Chrome 浏览器打开我的网站 - 格式完全是一团糟，表格的总宽度比它大得多应该。我试图自己解决这个问题，但我似乎只会在返回使用 IE 或 Firefox 时让事情变得更糟。

如果有人可以指导我实现跨平台兼容性，将不胜感激。

Answer 1

初始 Chrome 显示问题

我查看了您页面上的源代码...使用 align=center通常与较新的页面(例如 HTML5 页面)不兼容，不应使用。

轻松解决您的问题...

在主 DIV 中，替换为:

<div align="center">

有了这个:

<div style="max-width:800px; margin:auto">

将此处的宽度调整为您实际希望内容的宽度。当我使用 Chrome 检查器时，这个快速修复解决了您页面上的问题。

Internet Explorer 8 显示问题

我相信您遇到的问题在 IE 处理表格的方式上非常具体。查看您的源代码，我发现您使用的是三列，但由于 colSpan，任何一行上的列数都不会超过两列。

当从未定义所有三列时，IE 8(我相信还有 9)在表格列宽方面存在问题。这导致布局中断。修复有点 hack，但它看起来像这样:

<div style="max-width:860px; margin:auto">

<table class="dxb2" cellpadding="0" cellspacing="0">
    <tr>
        <td width="200"></td>
        <td width="451"></td>
        <td width="205"></td>
    </tr>
    <tr>
        <td width="651" colspan="2" valign="top">

如果您查看上面的代码，我所做的就是在您的表格顶部插入一个额外的行。这一行基本上是空白的，它的唯一目的是定义所有三列并为它们提供默认宽度。这修复了计算这些的 IE 问题。

我在桌面上复制了您的源代码并按上述方式进行了编辑...似乎在纠正 IE 问题方面效果很好(我这里有一个虚拟机，可以在 IE8 上进行测试)。但是让我知道它是如何为您工作的……希望这能解决最后的显示问题 :)