Neden Firefox ve Opera max-genişlik görmezden iç ekran: table-cell?

SORU

27 Mayıs 2010, PERŞEMBE

Neden Firefox ve Opera max-genişlik görmezden iç ekran: table-cell?

Aşağıdaki kodu doğru Chrome veya IE (resim 200px genişliğinde) görüntüler. Firefox ve Opera max-width tarzı tamamen göz ardı edilir. Neden böyle oluyor ve iyi bir iş var mı? Ayrıca, hangi yol en standartlarına uyumlu?

Not

Olası bir iş bu özel durum için yaklaşık 200px max-width ayarlamaktır. Ancak, bu oldukça yapmacık bir örnektir. Değişken genişlikte bir kap için bir strateji arıyorum.

<!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>

[Güncelleme]

Aşağıda mVChr belirttiği gibi, max-width w3.org spec devletler inline elementler için geçerli değildir. div img { max-width: 100%; display: block; } kullanarak denedim ama sorunu çözmek için görünmüyor.

[Güncelleme]

Ben hala bu sorun için bir çözüm var. Ancak, aşağıdaki javascript hack sorunları çözmek için kullanıyorum. Aslında bu durumda, yukarıda yeniden oluşturur ve tarayıcı olmadığını denetler display: table-cell içinde max-width destekler. (Data urı kullanarak ekstra bir http isteği engelliyor. Aşağıda 3 x 3 bir bmp.)

jQuery( function ( $ ) {

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

});

CEVAP

3 Temmuz 2012, Salı

Yapmanız gerekenler display: table başka bir div içinde sarıcı senin dıv (display: table-cell) koymaktırvetable-layout: fixed. Firefox ve Opera saygı hem max-width kural yapar.

this example on jsFiddle bkz.

Bunu Paylaş: