Webkit 不断改变表格的固定宽度答案

【问题标题】：Webkit keeps changing table's fixed widthWebkit 不断改变表格的固定宽度
【发布时间】：2012-09-20 14:10:24
【问题描述】：

我们正在重做整个网站。当前网站已有 7 年多的历史，但似乎有一个仅出现在基于 Webkit 的浏览器（Chrome 和 Safari）中的 CSS 错误。我们希望修复该错误，因为新网站可能需要一段时间才能准备好。

我们有一个固定宽度的表格：

<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
    <tr>
        <td class="left" width="200" valign="top">
            Contents of the menu here.
        </td>
        <td valign="top">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                Contents of website here.
            </table>
        </td>
    </tr>
</table>

相关元素和类的CSS如下：

td {
    font-size: 11px;
}

td.left {
    width: 200px;
    padding-top: 50px;
    background-color: #EFEFEF;
}

td.top {
  height: 16px;
  align: right;
  padding-bottom: 2px;
}

问题在于 Webkit 将 left 类的 td 计算为 161 像素而不是 200 像素。我可以通过添加style="display: block" 或style="min-width: 200" 来解决此问题，但是当我这样做时，Webkit 会将第一个表格的大小调整为 1039 像素而不是 1000 像素，从而导致页面的其余部分到处移动。它似乎完全忽略了固定宽度的要求。

我想知道是否有办法在不大幅改变网站结构的情况下解决此问题。如果需要，您可以在 the website in question 上使用 CSS。请注意，该错误仅出现在 Chrome 和 Safari 中。我检查了许多关于 Webkit 的错误报告和许多 Stack Overflow 问题，但似乎没有一个与我的问题完全匹配。

【问题讨论】：

我将尝试在我的服务器上提出这个问题，看看是否可以解决，请稍等。文档使用什么 DOCTYPE？
我将代码放在我的服务器上，它可以按您的意愿工作。表格是 1000 像素，td.left 元素是 200 像素。您缺少一些东西。

标签： php css html-table webkit fixed-width

【解决方案1】：

我认为问题在于右侧“赞助商”表中的图像。

将 min-width 设置为左表，并将 width:150px 设置为“sponsoren”-table 中的 div-tag，对我有用。

【讨论】：

那么问题是，图片向右重叠。只需将 min-width 设置为左侧，并将“center” text-td 的宽度值从 640 更改为 490 或 495。
问题确实与这些图像有关。它们比它们所在的容器大，导致整个页面表现得很奇怪。宽度错误仍然有效，但至少左侧面板现在看起来不那么奇怪了。感谢您的帮助！

【解决方案2】：

哇，不要在这样的基本脚本上使用表格，使用 div：

<div style="width:1000px; background-color:#ffffff; float:left; clear: both;">
    <div style="width:200px; float:left;">
        Contents of the menu here.
    </div>
    <div style="width:800px; float:right;">
        Contents of website here.
    </div>
</div>

这应该可以解决您的问题。

【讨论】：

我很清楚现在每个人都在使用 div。我也使用它们，这是我遇到问题时的第一个想法。问题是更改网站的结构（从表格到 div）可能会花费我们相当多的时间，尤其是如果我们想要正确使用 CSS。该网站非常过时，我宁愿把时间花在创建新网站上。不过，我会尝试花一些时间来弄清楚需要多长时间。谢谢。
将div内容慢慢添加到tabled网站并没有什么奇怪的，尤其是如果你可以在这个过程中去掉一些额外的table。

【解决方案3】：

尝试将类添加到您的表中：

table.yourclass {
    width: 1000px !important;
}

【讨论】：

表格宽度很好，只是当我尝试强制纠正内部元素的宽度时它会改变。我已经尝试将 !important 放在宽度之后，但问题是 Webkit 声称它正在跟随它们，但计算出的宽度总是不同的。
是的，没有效果。仅当我将显示设置为阻止时才有效，但宽度属性也有效（并且会弄乱页面的其余部分，请参阅原始帖子）。