Question

我的发烧友网站可以在http://www.488.cyberpictures.net找到 - 它只是与记事本和HTML程序员参考版本4一起放在一起。我不是网站设计和任何例程的精细点的专家谷歌搜索已发现使用过。因此，当我遇到问题时，我不得不问社区专家。

我使用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）在表列宽度方面存在问题。这导致布局中断。修复有点像黑客，但它看起来像这样：

<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上测试的VM）。但请告诉我它是如何为您工作的...希望能解决最后一个显示问题：）

只有Chrome会破坏我的网站格式

1 个答案:

初始Chrome显示问题

Internet Explorer 8显示问题