Question

以下代码在Chrome或IE中正确显示（图像宽度为200px）。在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来解决我的问题。从本质上讲，它会重新创建上述情况并检查浏览器是否支持max-width中的display: table-cell。（使用数据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();

});

Answer 1

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

请参阅this example on jsFiddle。

Answer 2

w3.org spec表示max-width不适用于内联元素，因此跨浏览器会出现不一致的行为。我不确定您的预期结果，但如果您设置div img { display:block }然后将img和p标记与浮点数而不是标准内联对齐，则可以实现此目标。

Answer 3

我使用width: 100%而不是max-width: 100%来实现它。

Answer 4

设置宽度：100％确实解决了问题，但它引入了另一个问题。在WordPress中，您不希望将宽度：100％设置为图像。如果图像是中等大小，宽度为300px，那么呢？我一直在使用类在中等大小上将宽度设置为50％，但如果图像较小会怎么样？然后它会被拉长。在webkit浏览器中，它适用于width：auto;最大宽度：100％;但是由于Firefox，Opera和IE忽略了......这是一个很大的问题。

Answer 5

这已成为一个非常混乱的话题......

最大宽度不适用于表格单元格中的内联元素。如果图像的显示设置为阻止，它会在图像上工作，但是100％是什么？在表格布局中，单元格的内容会推动列宽以尽可能地容纳所有内容。所以max-width：100％，在大多数情况下，表格单元格内部最终是内容的自然宽度。

这就是为什么以像素为单位设置图像的max-width属性的原因：

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

正如Alex所建议的那样，

table-layout: fixed可能会在图像不在表格的第一行中时起作用，因为第一行的内容决定了列的宽度。

Answer 6

对于特定情况，我意外地在网上找到了另一种解决方法：如果您使用display: table; + display: table-cell;来模拟响应式网站中的两个（或更多）列布局，请尝试以下方法：给边栏提供350px的宽度，网站的主要内容部分宽度为width: calc(100% - 360px);。这对我来说是个窍门，奖金是我需要一个固定宽度的侧边栏。我认为这也适用于em。

当然，这是依赖于js的，但现在应该不仅仅是OK。

Answer 7

将float: left添加到div css

Answer 8

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

Answer 9

我遇到了同样的问题。我解决了这个问题：

在Opera和Fi中测试

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

为什么Firefox和Opera忽略display：table-cell里面的max-width？

注意

[更新]

[更新]

9 个答案: