Dlaczego Firefox i Opera ignorują maksymalną szerokość wewnątrz komórki display: table?

Poniższy kod wyświetla się poprawnie w Chrome lub IE(obraz ma szerokość 200px). W Firefoksie i operze styl max-width jest całkowicie ignorowany. Dlaczego tak się dzieje i czy istnieje dobra praca? Ponadto, w jaki sposób większość standardów jest zgodna?

Uwaga

Jednym z możliwych sposobów obejścia tej konkretnej sytuacji jest ustawienie max-width na 200px. Jest to jednak dość wymyślny przykład. Szukam strategii dla zmiennej szerokości Pojemnik.

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

[Aktualizacja]

Jak podano w mVChr poniżej, w3.org spec stwierdza, że max-width nie ma zastosowania do inline elementów. Próbowałem użyć div img { max-width: 100%; display: block; }, ale nie wydaje się, aby rozwiązać problem.

[Aktualizacja]

Nadal nie mam rozwiązania tego problemu. Jednak, jestem za pomocą następujących javascript hack naprawić moje problemy. Zasadniczo odtwarza powyższą sytuację i sprawdza, czy przeglądarka obsługuje max-width w display: table-cell. (Za pomocą Data uri zapobiega dodatkowemu żądaniu http. Ten poniżej to bmp 3x3.)

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();

});
Author: Community, 2010-05-27
Source

9 answers

The w3.org spec stwierdza, że maksymalna szerokość nie ma zastosowania do elementów wbudowanych, więc można uzyskać niespójne zachowanie w różnych przeglądarkach. Nie jestem pewien zamierzonego wyniku, ale możesz go osiągnąć, jeśli ustawisz div img { display:block }, a następnie wyrównasz znaczniki img i p z pływakami zamiast standardowego inline.

 31
Author: mVChr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-27 18:55:11

To co musisz zrobić to umieścić swój wrapper div (ten z display: table-cell) wewnątrz innego div, który ma display: table oraz table-layout: fixed. To sprawia, że zarówno Firefox, jak i Opera respektują zasadę max-width.

Zobacz Ten przykład na jsFiddle.

 120
Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-03 11:48:12

Uruchomiłem go używając width: 100% zamiast max-width: 100%.

 0
Author: Liina,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-24 14:44:57

Ustawienie szerokości: 100% rozwiązuje problem, ale wprowadza inny. W WordPress nie chcesz ustawiać szerokości: 100% na obraz. Co jeśli obraz jest średniej wielkości o szerokości 300px, co wtedy? Używam klas, aby ustawić szerokość na 50% dla średnich rozmiarów, ale co, jeśli obraz jest mniejszy? Wtedy się rozciągnie. W przeglądarkach webkit działa z width: auto; max-width: 100%; ale ponieważ Firefox, Opera i IE ignorują to... to ogromny problem.

 0
Author: Daniel Dogeanu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-22 00:06:10

To bardzo mylący temat...

Max-width nie działa na elementach inline ani w elementach table-cell. Działa na obrazie, jeśli jego wyświetlacz jest ustawiony na blok, ale co to jest 100%? W układzie tabeli zawartość komórki przesuwa szerokość kolumny, aby pomieścić całą zawartość, jak to możliwe. Tak więc max-width: 100%, wewnątrz komórki tabeli kończy się naturalną szerokością zawartości w większości przypadków.

Dlatego ustawienie właściwości max-width obrazu w pikselach działa: 

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

table-layout: fixed, zgodnie z sugestią Alex, może działać, jeśli obraz nie znajduje się w pierwszym wierszu tabeli, ponieważ zawartość pierwszego wiersza dyktuje szerokości kolumn.

 0
Author: Hugo Silva,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-19 03:12:34

Dla konkretnego przypadku, jest inne obejście, które przypadkowo znalazłem w internecie: jeśli używasz display: table; + display: table-cell; aby naśladować układ dwóch (lub więcej) kolumn w witrynie responsywnej, spróbuj zamiast tego: nadaj pasku bocznemu szerokość, powiedzmy, 350px, a głównej części witryny szerokość podobną do width: calc(100% - 360px);. To mi pomogło, a premia była taka, że potrzebowałem paska bocznego o stałej szerokości. To też będzie działać z em.

Oczywiście jest to zależne od js, ale w dzisiejszych czasach powinno być więcej niż OK.

 0
Author: kufeiko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-13 18:53:39

Próbowałeś dodać właściwość position do swojego obrazu? img {position:relative;}? Powinien być zgodny z elementem nadrzędnym.

 -1
Author: Brook Julias,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-08 16:57:38

Dodaj float: left do div css

 -1
Author: Zachary Forrest,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-22 13:04:58

Miałem ten sam problem. Rozwiązałem to robiąc to:

Testowane w Operze i Fi 

.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}
 -3
Author: Zeriz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-10 10:26:11