0

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

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

4

3 回答 3

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>

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

于 2012-09-20T14:14:30.647 回答
1

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

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

于 2012-09-20T14:23:55.373 回答
0

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

table.yourclass {
    width: 1000px !important;
}
于 2012-09-20T14:13:10.443 回答