Chrome，Safari 忽略表中的最大宽度

我有这样的 HTML 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
</head>


<body>
<table style="width:100%;">
<tr>
<td>
<table style="width:100%; max-width:1000px; background:#000099;">
<tr>
<td>
001
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

问题是 Chrome 和 Safari 忽略了 "max-width:1000px" 我的朋友发现，我们可以通过为内部表添加 "display:block"来防止这种情况的发生，而且它在某种程度上是有效的。

所以，我想知道的是-有没有其他的方法来解决这个问题，为什么会发生这种情况？

65841 次浏览
小开
最佳答案

最大宽度适用于 块元素。<table>不是 阻止 < em > nor 内联。够模棱两可了吧？哈哈。你可以使用 display:block; max-width:1000px而忘记 width:100%。Chrome 和 Safari 遵守规则！

编辑2017年5月: 请注意，这个评论是7年前(2010年!).我怀疑浏览器这些年来已经改变了很多(我不知道，我不再做网页设计了)。我建议使用最新的解决方案。

小开

用 div 包装内表，并将最大宽度设置为这个包装 div。

小开

我也有同样的问题。我使用一个表作为在页面上居中显示内容的方法，但 safari 忽略了 width:100%; max-width:1200px作为应用于该表的样式。我了解到，如果我用 div 包装表格，并在 div 上设置 auto 的左右边距，那么它将以页面为中心，并遵从 safari 和 mac 上的 firefox 的 max 和 min width 属性。我还没有检查浏览器或铬窗口。这里有一个例子:

<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">

然后我把桌子嵌入到了。

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
小开

我知道这个问题已经解决了一段时间，并且有了一个可行的解决方案，但是说 max-width只适用于块元素和引用不是规范的源代码的答案是完全不正确的。

规格(用于 CSS 内部和外部尺寸的 CSS 3规范指的是 CSS 2.1规范中关于此规则的规定)明确指出:

除了未替换的行内元素、表行和行组之外的所有元素

这意味着它应该适用于表元素。

这意味着 WebKit 在表元素上不尊重 max-width或 min-width的行为是不正确的。

小开

我解决了媒体查询的问题:

我替换了

max-width: 360px

和

@media (min-width: 440px) {
width: 360px;
}
小开

我觉得你要找的是:

table-layout: fixed

将此样式应用于表，表将尊重分配给它的宽度。

注意: 在 Chrome中直接应用这种风格看起来不起作用。您需要在 CSS / HTML文件中应用样式并刷新页面。

小开

我刚刚得到了这个答案，值得注意的是，根据 MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) ，他们的最大宽度兼容性表显示:

|             Feature  | Chrome        | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes)           | Not supported     | (Yes) | Not supported   |

”[1] CSS 2.1显式地将 max-width 的行为留给了未定义的。因此，任何行为都是符合 CSS2.1的; 新的 CSS 规范可能会定义这种行为，所以 Web 开发人员现在不应该依赖于特定的行为。”

虽然 MDN 上有一些很酷的东西，比如“填充-可用”和“适合-内容”——当规范稳定并在这方面明确时，我们有一些东西可以期待..。

小开

这里有一个明确的参考: 10可视化格式化模型详细信息(w3.org)

在 CSS 2.1中，“最小宽度”和“最大宽度”放在桌子上、内联表、表单元格、表列和列组 是不确定的的效果。

前面在这个线程中给出的引用，错误地将“ table rows”读作“ table”。然而，这个真的说“桌子”。这是 CSS2的一部分，但是 CSS3指的是 CSS2作为 max-width的基础。

所以它只是未定义，浏览器可以自由地做他们想做的事情，依赖它是不安全的。


提交答案