wake-up-neo.com

IE7 und die CSS-Tabellenzelleigenschaft

Ich liebe es also, wenn meine Anwendung in Firefox großartig funktioniert, aber dann öffne ich sie in IE und ... Nein, bitte versuchen Sie es erneut.

Das Problem, das ich habe, ist, dass ich eine CSS-Anzeigeeigenschaft mit JavaScript entweder auf none oder table-cell setze.

Ich habe anfangs display: block verwendet, aber Firefox hat es ohne die table-cell-Eigenschaft komisch dargestellt.

Ich würde das gerne tun, ohne einen Hack im JavaScript hinzuzufügen, um den IE zu testen. Irgendwelche Vorschläge?

Vielen Dank.

32
Ryan Smith

Eine gute Möglichkeit, dieses Problem zu lösen, setzt den Wert display auf '':

<script type="text/javascript">
<!--
function toggle( elemntId ) {
    if (document.getElementById( elemntId ).style.display != 'none') {
        document.getElementById( elemntId ).style.display = 'none';
    } else {
        document.getElementById( elemntId ).style.display = '';
    }
    return true;
}
//-->
</script>

Der leere Wert bewirkt, dass der Stil auf den Standardwert zurückgesetzt wird. Diese Lösung funktioniert in allen gängigen Browsern.

31
Jacco

Ich habe das mit jQuery gelöst:

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

das obige Skript setzt voraus, dass Sie divs mit einem Stil wie

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

Ich hatte das gleiche Problem und habe gebraucht

*float: left; 

"*" zeigt nur IE an

9

Nun, IE7 hat display: table(-cell/-row) nicht, also müssen Sie etwas anderes herausfinden oder Browser-Targeting durchführen (was ich zustimme, ist ein böser Hack). Als schnelle Lösung (ich weiß nicht, was Sie zu erreichen versuchen), könnten Sie display: inline-block ausprobieren und sehen, wie es aussieht.

Vielleicht finden Sie einen Weg, um display: block zu tun und stattdessen das Problem des "Firefox-Rendering" zu lösen? Kannst du genau beschreiben, was du mit dem seltsamen Rendering meinst?

4
joelhardi

Die Verwendung von Inline-Block funktioniert gut für diese Art von Sachen. Nein, IE 6 und IE 7 verfügen technisch gesehen nicht über Anzeige: Inline-Block. Sie können das Verhalten jedoch mit den folgenden Stilen replizieren:

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

Der Schlüssel dazu ist 'zoom: 1', um die 'hasLayout'-Eigenschaft des Elements umzuschalten, wodurch die Art und Weise geändert wird, in der der Browser ein Blockebenenelement darstellt. Das einzige Problem mit dem Inline-Block ist, dass Sie keinen Rand von weniger als 4 Pixeln haben können.

4
risingfish

Sie benötigen niemals Javascript, um auf IE zu testen, verwenden Sie bedingte Kommentare .

Sie können sich die Lösung diese Jungs anschauen, die für die Handhabung von tabellarischer Anzeige im IE gedacht ist.

4
eyelidlessness

Ich benutze CSS seit über einem Jahrzehnt und hatte noch nie Gelegenheit, display: table-cell zu verwenden, und die einzigen, die ich bedingt bedingte Kommentare benutze, sind das Ausblenden fortgeschrittener Effekte vor IE6. 

Ich vermute, dass ein anderer Ansatz Ihr Problem auf intrinsisch Cross-Browser-Art lösen würde. Können Sie eine separate Frage öffnen, in der die Auswirkungen beschrieben werden, die Sie erzielen möchten, und die aktuell in Firefox verwendeten HTML- und CSS-Dateien posten?

3
Herb Caudill

Ein Codebeispiel für die bedingten Kommentare, die der Benutzer mit Augenlidlosigkeit gepostet hat

"[if lt IE 8]" funktioniert nur, wenn der Browser IE niedriger als IE8 ist, weil IE8 dies richtig macht. Mit den bedingten Kommentaren ordnet IE7 die DIVs schön horizontal an ... 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> 

Mein 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 und 9 Arbeiten Sie mit dem CSS genauso wie FireFox. IE7 sieht nun mit den Tags Table und TD & TR gleich aus. Auf einigen Seiten funktionierte IE 8 nur 20% der Zeit, daher verwendete ich [if lt IE 9].

Dies hilft auch, Probleme mit vertikaler Ausrichtung zu beseitigen, mit denen IE7 nicht umgehen kann.

IE7 unterstützt display:inline-block; ebenfalls nicht. Ein offensichtlicher Hack ist zoom: 1; *display: inline; nach Ihrer css für display:table-cell;

0
Phill Healey

Ich habe alles ausprobiert und der einzige Weg, den ich gefunden habe, war der Browser. Dies ist eine saubere, leichte Lösung: hier klicken

0
Mike6679