为什么 Firefox 和 Opera 会忽略 display: table-cell 内的最大宽度？答案

【问题标题】：Why do Firefox and Opera ignore max-width inside of display: table-cell?为什么 Firefox 和 Opera 会忽略 display: table-cell 内的最大宽度？
【发布时间】：2011-02-24 19:22:09
【问题描述】：

以下代码在 Chrome 或 IE 中正确显示（图片为 200 像素宽）。在 Firefox 和 Opera 中，max-width 样式被完全忽略。为什么会发生这种情况，是否有好的解决方法？另外，哪种方式最符合标准？

注意

针对这种特殊情况的一种可能的解决方法是将max-width 设置为200px。然而，这是一个相当人为的例子。我正在寻找可变宽度容器的策略。

<!doctype html>
<html>
<head>
    <style>
        div { display: table-cell; padding: 15px; width: 200px; }
        div img { max-width: 100%; }
    </style>
</head>
<body>
    <div>
        <img src="http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
            ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue.
            at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            leo metus, aliquam eget convallis eget, molestie at massa.
        </p>
    </div>
</body>
</html>

[更新]

正如下面mVChr 所述，w3.org spec 声明max-width 不适用于inline 元素。我尝试过使用div img { max-width: 100%; display: block; }，但似乎无法解决问题。

[更新]

我仍然没有解决这个问题。但是，我正在使用以下 javascript hack 来解决我的问题。本质上，它重新创建了上述情况并检查浏览器是否支持display: table-cell 中的max-width。（使用数据 uri 可以防止额外的 http 请求。下面是 3x3 bmp。）

jQuery( function ( $ ) {

    var img = $( "<img style='max-width:100%' src='" +
    "data:image/bmp;base64,Qk1KAAAAAAAAAD4AAAAoAAAAAwAAA" +
    "AMAAAABAAEAAAAAAAwAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP//" +
    "/wAAAAAAwAAAAKAAAAA%3D" +
    "'>" )
    .appendTo(
        $( "<div style='display:table-cell;width:1px;'></div>" )
        .appendTo( "body" )
    );
    $.support.tableCellMaxWidth = img.width() == 1;
    img.parent().remove();

});

【问题讨论】：

不太确定您要达到的目标是什么？你想让你的图片缩放吗？
+1 不，他的例子很好。图片有......大约400px。如果你告诉它获取width: 100px;，它会缩小。但它不尊重最大宽度。
好的，我明白了。你不想设置你的 div 最大宽度？
@edl 不，div 可以是可变宽度。

标签： html css css-tables

【解决方案1】：

您需要做的是将您的包装 div（带有 display: table-cell 的那个）放入另一个带有 display: table 和 table-layout: fixed 的 div 中。这使得 Firefox 和 Opera 都遵守max-width 规则。

见this example on jsFiddle。

【讨论】：

我已经尝试过 table-layout: 固定在 FF (19) 和 IE (9) 上，即使没有最大宽度也可以工作。
对我来说 table-layout: fixed 规则修复了图像问题，但使整个表格变窄了，即使我有 width: 100% on element with display: table
表格布局的 MDN 参考 developer.mozilla.org/en-US/docs/Web/CSS/table-layout。谢谢亚历克斯！
在我的情况下，我无法为父容器设置像素宽度，添加 display: table 和 table-layout: fixed 为我做了魔法
谢谢！我在现有的 Android 浏览器中遇到了一个可能相关的问题（尝试在具有 display:table-cell 的元素内的图像上使用百分比最大宽度），table-layout: fixed 为我解决了这个问题。

【解决方案2】：

w3.org spec 声明 max-width 不适用于内联元素，因此您将在浏览器中获得不一致的行为。我不确定您的预期结果，但如果您设置div img { display:block }，然后将img 和p 标签与浮动而不是标准内联对齐，您可能会实现它。

【讨论】：

好发现！该规范似乎不适用于内联元素。不幸的是，它似乎并没有解决问题。
显示必须是表格单元格吗？删除它会得到更一致的结果。
好吧，我没有编写使用table-cell 的代码，老实说我不太了解它。所以是的，它必须是表格单元格。
您能否重写页面，使所有带有display:table-cell; 的 div 实际上都是表格单元格。如果您要将 div 显示为 table-cell，我看不到使用 div 的好处
这是规范的确切部分：w3.org/TR/CSS2/visudet.html#min-max-widths

【解决方案3】：

我通过使用width: 100% 而不是max-width: 100% 让它工作了。

【讨论】：

这是一个非常糟糕的答案。在处理图像时，width 和 max-width 之间的差异非常重要。 width 强制图像为该宽度，无论这是否会比其分辨率大得多（在大多数情况下看起来很讨厌）。但是max-width定义了图片不能大于指定的大小，这意味着如果图片大于容器，它将被缩放到100%
@idmean，虽然我同意你的观点，但我认为这不一定是一个“非常糟糕的答案”，因为可能存在强制width 然后拥有图像的用例溢出细胞。或者，可以将width 与max-width 结合使用，这取决于具体情况。

【解决方案4】：

设置 width: 100% 确实解决了这个问题，但它引入了另一个问题。在 WordPress 中，您不想将 width: 100% 设置为图像。如果图像是中等大小，宽度为 300 像素，那会怎样？我一直在使用类将中等大小的宽度设置为 50%，但是如果图像更小怎么办？然后它会被拉伸。在 webkit 浏览器中，它适用于 width: auto;最大宽度：100%；但由于 Firefox、Opera 和 IE 忽略了这一点……这是个大问题。

【讨论】：

【解决方案5】：

这已经成为一个非常令人困惑的话题......

Max-width 不适用于内联元素，也不适用于表格单元格元素。如果图像的显示设置为阻止，它确实可以处理图像，但什么是 100%？在表格布局中，单元格的内容会推动列宽以尽可能容纳所有内容。因此，在大多数情况下，表格单元格内的 max-width:100% 最终是内容的自然宽度。

这就是为什么以像素为单位设置图像的最大宽度属性的原因：

<style>
    div { display: table-cell; padding: 15px; width: 200px; }
    div img { max-width: 200px; display:block;}
</style>

table-layout: fixed，正如 Alex 所建议的那样，如果图像不在表格的第一行中，可能会起作用，因为第一行的内容决定了列宽。

【讨论】：

【解决方案6】：

对于特定情况，我在网上偶然发现了另一种解决方法：如果您使用 display: table; + display: table-cell; 在响应式网站中模仿两（或更多）列布局，请尝试以下方法：给侧边栏例如，350px 的宽度和网站的主要内容部分的宽度，例如 width: calc(100% - 360px); 。这对我有用，而且我需要一个固定宽度的侧边栏。我想这也适用于 em。

当然，这是依赖于 js 的，但现在应该已经可以了。

【讨论】：

【解决方案7】：

您是否尝试过为图像添加位置属性？ img {position:relative;}?它应该符合父元素。

【讨论】：

【解决方案8】：

将float: left 添加到 div css

【讨论】：

【解决方案9】：

我遇到了同样的问题。我通过这样做解决了它：

在 Opera 和 Fi 中测试

.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}

【讨论】：