web-dev-qa-db-de.com

Warum ignorieren Firefox und Opera die maximale Breite in der Anzeige: Tabellenzelle?

Der folgende Code wird in Chrome oder IE richtig angezeigt (das Bild ist 200px breit). In Firefox und Opera wird der max-width-Stil vollständig ignoriert. Warum passiert das und gibt es eine gute Arbeit? Auf welche Weise entsprechen die meisten Standards?

Hinweis

Eine mögliche Problemumgehung für diese spezielle Situation besteht darin, max-width auf 200px zu setzen. Dies ist jedoch ein eher einfallsreiches Beispiel. Ich suche nach einer Strategie für einen Container mit variabler Breite.

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

[Aktualisieren]

Wie in mVChr unten angegeben, gibt die w3.org spec an, dass max-width nicht für inline-Elemente gilt. Ich habe versucht, div img { max-width: 100%; display: block; } zu verwenden, aber es scheint das Problem nicht zu beheben.

[Aktualisieren]

Ich habe immer noch keine Lösung für dieses Problem. Ich benutze jedoch den folgenden Javascript-Hack, um meine Probleme zu beheben. Im Wesentlichen wird die obige Situation neu erstellt und überprüft, ob der Browser max-width in display: table-cell unterstützt. (Die Verwendung eines Daten-URI verhindert eine zusätzliche http-Anfrage. Die folgende ist ein 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

Die w3.org spec besagt, dass max-width nicht für Inline-Elemente gilt, sodass Sie in Browsern inkonsistentes Verhalten erhalten. Ich bin mir nicht sicher, was Sie beabsichtigen, aber Sie können dies erreichen, wenn Sie div img { display:block } setzen und dann die Tags img und p mit Floats anstelle von Inline ausrichten.

31
mVChr

Was Sie tun müssen, ist, Ihr Wrapper div (das mit display: table-cell) in ein anderes div mit display: tableundtable-layout: fixed zu packen. Das bedeutet, dass sowohl Firefox als auch Opera die max-width-Regel einhalten.

Siehe dieses Beispiel zu jsFiddle .

120
Alex

Einstellungsbreite: 100% behebt das Problem, führt jedoch ein anderes ein. In WordPress möchten Sie keine Breite festlegen: 100% für ein Bild. Was ist, wenn das Bild mit einer Breite von 300 Pixeln mittelgroß ist, was dann? Ich habe Klassen verwendet, um die Breite bei mittlerer Größe auf 50% festzulegen, aber was ist, wenn das Bild kleiner ist? Dann wird es gestreckt. In Webkit-Browsern funktioniert es mit width: auto; Max-Breite: 100%; Aber da Firefox, Opera und IE das ignorieren, ist das ein großes Problem.

0
Daniel Dogeanu

Ich habe es mit width: 100% anstelle von max-width: 100% zum Laufen gebracht.

0
Liina

Dies ist zu einem sehr verwirrenden Thema geworden ...

Die maximale Breite funktioniert nicht für Inline-Elemente, auch nicht für Tabellenzellenelemente . Sie funktioniert für ein Bild, wenn die Anzeige blockiert ist, aber was ist 100%? In einem Tabellenlayout drückt der Inhalt einer Zelle die Spaltenbreite, um den gesamten Inhalt möglichst zu berücksichtigen. Also max-width: 100%, in einer Tabellenzelle wird in den meisten Fällen die natürliche Breite des Inhalts angegeben.

Das Festlegen der Max-Width-Eigenschaft Ihres Bildes in Pixeln funktioniert daher:

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

table-layout: fixed kann, wie von Alex vorgeschlagen, funktionieren, wenn sich das Bild nicht in der ersten Zeile der Tabelle befindet, da der Inhalt der ersten Zeile Spaltenbreiten vorschreibt.

0
Hugo Silva

Für einen bestimmten Fall gibt es eine andere Problemumgehung, die ich aus Versehen online gefunden habe: Wenn Sie display: table; + display: table-cell; verwenden, um ein Layout von zwei (oder mehr) Spalten in einer responsiven Site zu imitieren, versuchen Sie Folgendes: Geben Sie der Seitenleiste eine Breite von beispielsweise 350px und Der Hauptinhaltsteil der Site hat eine Breite wie width: calc(100% - 360px);. Das war der Trick für mich und der Vorteil war, dass ich eine Seitenleiste mit fester Breite brauchte. Ich denke, das funktioniert auch mit ems.

Dies ist natürlich js-abhängig, sollte aber heutzutage mehr als OK sein.

0
kufeiko