Internet Explorer 8 ignoruje szerokość dla 'display: table-cell' elementu

According to quirks mode Internet Explorer 8 dokłada Opcje tabeli Wsparcie dla właściwości wyświetlania, ale w tym przykładzie wykazuje bardzo dziwne zachowanie
http://jsfiddle.net/e3cUn/3/Internet Explorer 8 ignoruje szerokość dla 'display: table-cell' elementu

W normalnej przeglądarce , obraz wewnętrzny zostanie przeskalowany do rozmiaru 150x150 bez zmiany stosunku wymiarów (rozciągania).

alt text

Ale w IE8, poza box (niebieska) będzie również rozciągnąć:
alt text

1) Widziałeś coś takiego? Wydaje się być związany z text-align:center: usunięcie tej właściwości rozwiązuje problem, ale muszę wyśrodkować obraz (przynajmniej w przeglądarkach innych niż.

2) Jeśli nie można tego naprawić prawidłowo, w jaki sposób mogę zapewnić specjalną wartość display dla IE? Widziałem kilka przykładów w Internecie, takich jak #display: block;, ale wszystkie z nich działają tylko w IE7.

edytuj Wiem o <!--[if IE 8]> i podobnych komendach do umieszczenia w html, ale tak naprawdę szukałem sposobu, aby to zrobić w pliku css. Coś podobnego to

display: table-cell; 
    #display: block;

Drugi wiersz nie jest komentarzem, zastępuje poprzednią wartość dla ie7 i poniżej. (ale nie ie8)

Dzięki!

Źródło

2011-01-05 Nikita Rybak

+1, sam trafię w ten sam horrendalny błąd! –

Możesz także wybrać IE8 z 'display: block \ 9;'. – Tower

Po dodaniu Bounty, skończyłem pracować nad tym problemem, celując w mój CSS w IE8. Byłem już przy użyciu Paul Irish's technique of adding classes to the <html> element użyciu komentarzy warunkowych:

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7 ielt9"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8 ielt9"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Więc wszystko, co musiałem zrobić, to dodać dodatkową regułę CSS dla IE 8 i dolna:

.img-container { display: table-cell; } /* IE9+ and other browsers */ 
.ielt9 .img-container { display: block; } /* IE8 and lower */

połączeniu z techniques for vertically centring images, to daje mi ładne rozwiązanie dla różnych przeglądarek.

Źródło

2011-10-12 08:52:30

Fajna sztuczka ze stylami warunkowymi! Podobnie jak wszystkie niesamowite rzeczy, wydaje się proste w retrospekcji. –

czy masz etykietę doctype?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head>

Raz miałem taki sam problem z IE, który rozwiązał problem.

Powodzenia

Źródło

2011-01-05 19:22:45 Sebastjan

Zmieniłem "ścisły" na "przejściowy", wciąż taki sam. Cóż, dziękuję za próbę! –

Jeśli text-align: center nie działa, można spróbować następujące zamiast (chyba że masz jakiś powód, że wykorzystując układ tabeli jest to konieczne). Jest to na ogół preferowana metoda centrowania dowolnego elementu układu bloku. Korzystanie z centrum text-align jest awaryjna, gdy jest to konieczne, ale mniej wiarygodne w moim doświadczeniu - nie można go używać do zagnieżdżonych div itp
```
img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
```
Jeśli trzeba zrobić niestandardową nadpisanie czyli Najprostszym sposobem jest użycie zewnętrznego arkusza stylów i dostarczyć następujące w sekcji <head>:
```
 
```
Supply że arkusza poniżej zwykłej jednej i powinien go zastąpić. Jeśli tak, zawsze możesz użyć znaczników !important na końcu instrukcji, które musisz przesłonić (choć zawsze lepiej jest tego unikać, chyba że jest to absolutnie konieczne, ponieważ powoduje to dziedziczenie elementów potomnych i musisz o tym pamiętać.).Na przykład:
```
.root img { 
    text-align: left !important; 
    ... 
} 
```

Źródło

2011-01-05 19:29:59

1) "display: table-cell" to jedyny przyzwoity sposób, jaki wiem, aby wyśrodkować obraz w pionie. A jeśli ją usunę, poziome centrowanie nie będzie już problemem. –

2) Wiem, że faktycznie szukałem sposobu, aby zapewnić wartości specyficzne dla IE _inside_ css. Nie chcę tworzyć oddzielnego arkusza stylów dla ie (chociaż będę, jeśli jest to jedyna opcja). Czy wiesz coś takiego? –

1) Zauważyłem w krótkim teście, że możesz użyć zarówno 'display: table-cell' dla elementu kontenera, jak i sztuczki' margin: auto' na elemencie img. Więc prawdopodobnie mógłbyś wyrzucić 'text-align: center' z elementu' .root' i zamiast tego zamiast niego stylować 'img'. 2) Jedynym wewnętrznym hackem IE CSS, który widziałem z jakąkolwiek wiarygodnością (choć nie lubię tego), jest użycie '*', które jak sądzę * nadal działa tak jak w IE8. Nie widzę też rozciągnięcia, które zgłaszasz w IE7. –

Zastosowanie width zamiast max-width ponieważ w IE8 rzeczywista szerokość obrazu zostaną podjęte na stole. Sprawdź to Fiddle.

Przegrupuj CSS:

.root img { 
    width: 130px; 
    max-height: 130px; 
}

Updated

CSS:

.root span { 
    width:130px; 
    overflow:hidden; 
    display:inline-block; 
} 
.root img { 
    max-width: 130px; 
    max-height: 130px; 
}

HTML:

<div class="root"> 
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png /></span> 
</div>

Źródło

2011-10-12 04:44:19 Sanooj

Jest to rozwiązanie połowiczne, ale nie zachowuje proporcji obrazu, gdy wysokość obrazu jest większa niż jego szerokość, prawda? –

ok, zaktualizowałem http://jsfiddle.net/e3cUn/61/, ale będziesz musiał użyć span poza obrazem. Sprawdź powyższą odpowiedź na zaktualizowane – Sanooj

świetne rozwiązanie +1. Ponieważ już celowałem w CSS w kierunku IE 7 i IE 6, postanowiłem po prostu zmienić kod, aby skierować ten sam CSS do IE 8, który naprawił problem. W przeciwnym razie zdecydowanie bym to zrobił. –

Wydaje pomóc jeśli pojemnik dominującym elementem display:table-cell posiada atrybut display:table (a table-layout:fixed), patrz this example i this related question.

Źródło

2013-03-27 11:52:06 0x4a6f4672

"Układ tabeli: naprawiono" wydaje się naprawić to dla mnie. Dzięki. –

Internet Explorer 8 ignoruje szerokość dla 'display: table-cell' elementu

Odpowiedz

Powiązane problemy