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

小编典典

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

html

以下代码在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规范声明max-width不适用于inline元素。我尝试使用div img { max-width: 100%; display: block;}，但似乎无法解决问题。

[更新]

对于这个问题，我仍然没有解决方案。但是，我正在使用以下JavaScripthack来解决我的问题。从本质上讲，它重新创建浏览器是否支持上述情况，并检查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();

});

阅读 304

2020-05-10

共1个答案

小编典典

该w3.org规范指出，最大宽度并不适用于内联元素，所以你会得到跨浏览器的行为不一致。我不确定您的预期结果，但是如果您设置divimg { display:block }和然后将img和p标记与浮点数而不是标准内联对齐，就可以实现。

2020-05-10