Question

我们正在重做整个网站。目前的网站已有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计算 td ，类 left 为161像素而不是200像素。我可以通过添加style="display: block"或style="min-width: 200"来解决此问题，但是当我这样做时，Webkit会将第一个表调整为1039像素而非1000，从而导致页面的其余部分转移到整个地方。它似乎完全忽略了固定宽度要求。

我想知道是否有办法解决这个问题而不会彻底改变网站的结构。如果需要，您可以在the website in question上使用CSS。请注意，该错误仅出现在 Chrome 和 Safari 中。我已经检查了许多针对Webkit的错误报告和许多Stack Overflow问题，但它们似乎都没有完全符合我的问题。

Answer 1

哇，不要在这样的基本脚本上使用表格，请使用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>

这可以解决你的问题。

Answer 2

我认为问题是右手“赞助”表中的图像。

将min-width设置为左表，宽度：150px设置为“sponsoren”-table中的div-tag，对我来说很有用。

Answer 3

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

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

Webkit不断更改表的固定宽度

3 个答案: