IE7 i właściwość CSS table-cell

Rozwiązałem to używając jQuery:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

Powyższy skrypt zakłada, że masz divy używając stylu takiego jak:

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>

Miałem ten sam problem i użyłem

*float: left; 

" * " oznacza TYLKO IE

No cóż, IE7 nie ma display: table(-cell/-row) więc będziesz musiał wymyślić coś innego lub zrobić kierowanie przeglądarki (co zgadzam się, to zły hack). Jako szybką poprawkę (Nie wiem, co próbujesz osiągnąć, wyglądowo) możesz spróbować display: inline-block i zobaczyć, jak to wygląda.

Może wymyślić sposób, aby zrobić display: block i rozwiązać problem "Firefox rendering it weird" zamiast tego? Czy możesz dokładnie opisać, co masz na myśli przez dziwne renderowanie?

Nigdy nie potrzebujesz Javascript do testowania dla IE, użyj komentarzy warunkowych .

Możesz spojrzeć na rozwiązanie Ci faceci wymyślili do obsługi wyświetlania tabel w IE.

Używanie inline-block działa dobrze dla tego typu rzeczy. Nie, IE 6 i IE 7 technicznie nie mają display: inline-block, ale można replikować zachowanie za pomocą następujących stylów:

div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

Kluczem do tego jest 'zoom: 1' włącza właściwość 'hasLayout' na elemencie, która zmienia sposób, w jaki przeglądarka renderuje element poziomu bloku. Jedynym, który ma wbudowany blok jest to, że nie możesz mieć marginesu mniej niż 4px.

Używam CSS od ponad dekady i nigdy nie miałem okazji używać display: table-cell, a jedyne, co kiedykolwiek używam komentarzy warunkowych, to ukrywanie zaawansowanych efektów z IE6.

Podejrzewam, że inne podejście rozwiązałoby twój problem w sposób wewnętrzny między przeglądarkami. Czy możesz otworzyć osobne pytanie, które opisuje efekt, który próbujesz osiągnąć, i opublikować HTML i CSS, który obecnie działa w Firefoksie?

Przykład kodu fot komentarze warunkowe, które użytkownik powiek, uprzejmie napisał

" [if lt IE 8] " działa tylko wtedy, gdy przeglądarka jest IE niższa niż IE8, ponieważ IE8 robi to dobrze. Z komentarzami warunkowymi IE7 ładnie układa divy poziomo... HTML:

 <div class="container">
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="en.html">English</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="de.html">Deutsch</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]></tr></table><![endif]-->
</div> 

Mój CSS

.link {
 display:table-cell;
 vertical-align:middle;
 }
 div.container {
 margin: 0 auto;
 display:table;
 }
 .thumb {
 display:table-cell;
 float: left;
 text-align: center;
 }

IE 8 i 9 działają z CSS, podobnie jak FireFox. IE7 wygląda teraz tak samo używając Table i td & tr tagów. Na niektórych stronach IE 8 działało tylko 20% czasu, więc użyłem [if lt IE 9 ]

Pomaga to również wygładzić problemy z wyrównaniem pionowym, z którymi IE7 nie radzi sobie.

Próbowałem wszystkiego i jedynym sposobem, w jaki znalazłem to wszystko cross browser było użycie Javascript / Jquery. Jest to czyste rozwiązanie lekkie: Kliknij tutaj

IE7 również nie obsługuje display:inline-block;. Widoczny hack to zoom: 1; *display: inline; po css dla display:table-cell;