web-dev-qa-db-ja.com

FirefoxとOperaがディスプレイ内の最大幅を無視するのはなぜですか：table-cell？

次のコードは、ChromeまたはIE（画像の幅は200px）です。Firefoxでは、Opera max-widthスタイルは完全に無視されます。

注意

この特定の状況で考えられる回避策の1つは、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; }を使用してみましたが、問題は修正されていないようです。

[更新]

この問題の解決策はまだありません。ただし、問題を解決するために次のJavaScriptハックを使用しています。基本的に、上記の状況を再現し、ブラウザーが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();

});
htmlcsscss-tables
67
brad

w3.org仕様 は、max-widthがインライン要素に適用されないため、ブラウザー間で一貫性のない動作が発生することを示しています。意図した結果はわかりませんが、div img { display:block }その後、imgおよびpタグを標準のインラインではなくフロートに揃えます。

31
mVChr

必要なことは、display: table-cellandを持つ別のdiv内にラッパーdiv（display: tableを持つdiv）を配置することですtable-layout: fixed。これにより、FirefoxとOperaはmax-widthルールを尊重します。

jsFiddleのこの例 を参照してください。

120
Alex

幅の設定：100％で問題は解決しますが、別の問題が発生します。 In WordPress幅を設定したくない：100％の画像。画像が300pxの幅で中サイズの場合、どうすればいいですか？中サイズで幅を50％に設定しますが、画像が小さい場合はどうなりますか？それは拡大されますWebkitブラウザーでは、width：auto; max-width：100％;しかしFirefox以降、Opera and IEそれを無視...それは大きな問題です。

0
Daniel Dogeanu

width: 100%の代わりにmax-width: 100%を使用して動作させました。

0
Liina

これは非常に紛らわしいトピックになりました...

Max-widthは、テーブルセル要素でもインライン要素でも機能しません。ディスプレイがブロックするように設定されている場合、画像に対して機能しますが、100％とは何ですか？テーブルレイアウトでは、セルのコンテンツが列幅を押して、可能な限りすべてのコンテンツを収容します。したがって、テーブルセル内のmax-width：100％は、ほとんどの場合、コンテンツの自然な幅になります。

そのため、画像のmax-widthプロパティをピクセル単位で設定すると機能します。

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

table-layout: fixedは、画像が表の最初の行にない場合、最初の行のコンテンツが列の幅を決定するため、Alexが提案するように機能する場合があります。

0
Hugo Silva

特定のケースについて、オンラインで偶然見つけた別の回避策があります：display: table; + display: table-cell;レスポンシブサイトの2つ（またはそれ以上）の列レイアウトを模倣するには、代わりにこれを試してください。たとえば、サイドバーに350pxの幅を、サイトのメインコンテンツ部分にwidth: calc(100% - 360px);のような幅を与えます。それは私のためのトリックをしました、そして、ボーナスは固定幅のサイドバーが必要だったことです。私はそれがemでもうまくいくと思います。

もちろん、これはjsに依存しますが、最近では問題ありません。

0
kufeiko