Question

首先让我说我知道你不应该使用表格进行布局 - 我在这里修复别人的代码。

我有一个菜单实际上只是一个有2行的表。顶行是横幅，底行是<ul>，里面有一堆菜单项。

现在出于某种原因，这在IE中完美运行，但它在Chrome中不起作用。问题是如果你有更多的菜单项可以在页面上显示，Chrome似乎根本不渲染这些项目，其中IE包装项目并在下一行显示额外的项目。 IE行为是我正在寻找的。

<table id="menu_table" width="100%" style="border:collapse" cellpadding="0" cellspacing="0" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
    <tr>
        <td valign="top" colspan=2>
            <!-- iframe with banner -->
        </td>
    </tr>
    <tr>
        <td class="header>" valign="top" style="textweight:normal; " >
            <!-- ul with lots if li items -->
        </td>
        <td class="header" >
            <!-- another control -->
        </td>
    </tr>
</table>

如果我将“Chrome”功能用于“检查元素”，我可以看到表格行占据了页面的100％以上 - 突出显示的区域延伸到屏幕的一侧。如果我在桌子周围使用div，我可以看到div在它周围留下了一点边距，但div中的表仍然坚持渲染超过100％。

您可以在jsfiddle上看到此操作 - 如果您在IE中查看此内容，它将换行到下一行，如果您在Chrome中查看它将从页面中消失

Answer 1

尝试从td样式中删除white-space: nowrap;（来自您在此处发布的示例：http://jsfiddle.net/8KbPF/12/）

Answer 2

我无法在Chrome中复制此问题。

使用以下CSS规则

ul { text-decoration:none;}
li { display:inline;}

我的列表项目换行。

在黑暗中拍摄，尝试应用风格：

ul { white-space:normal; }

正常情况下，空白序列将折叠成单个空格。必要时文本将换行。这是默认值。 CSS White-space property @ W3Schools

如果我使用

ul { white-space:nowrap; }

我可以实现您描述的演示行为。

HTML表格占据了超过100％的页面

2 个答案: