IE7 und die CSS-table-cell-Eigenschaft

Question

Also habe ich es einfach lieben, wenn meine Anwendung in Firefox groß funktioniert, aber ich öffne es dann in IE und ... Nein, bitte versuchen Sie es erneut.

Das Problem, das ich habe ist, dass ich eine CSS-Eigenschaft display habe die Einrichtung entweder none oder table-cell mit JavaScript.

Ich war anfangs mit display: block, aber Firefox wurde Rendering es komisch ohne die table-cell Eigenschaft.

Ich würde gerne, dies zu tun, ohne einen Hack in der JavaScript-Zugabe für IE zu testen. Irgendwelche Vorschläge?

Danke.

Answer 1

Eine gute Möglichkeit, diese zur Lösung des display Wert Einstellung '':

<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 wieder zurückzukehren, um es Standardwert ist. Diese Lösung funktioniert in allen gängigen Browsern.

Answer 2

ich gelöst habe dies mit jQuery:

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

das obige Skript vorausgesetzt, dass Sie divs haben mit Stil wie:

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

Answer 3

Ich hatte das gleiche Problem und verwende

*float: left; 

"*" zeigt nur IE

Answer 4

Nun, IE7 nicht display: table(-cell/-row) haben, so dass Sie etwas anderes müssen Abbildung oder tun Browser-Targeting (was ich zustimmen, ist schlecht Hack). Als schnelle Lösung (ich weiß nicht, was Sie versuchen, Aussehen-weise zu erreichen) können Sie versuchen, display: inline-block und sehen, wie es aussieht.

Vielleicht einen Weg finden, um display: block zu tun und löst das Problem der „Firefox es macht weird“ statt? Können Sie beschreiben, was Sie durch die seltsame Rendering genau bedeuten?

Answer 5

Sie müssen nie Javascript für IE zu testen, verwenden Sie bedingte Kommentare .

Sie können auf die Lösung aussehen diese Jungs mit aufkam für tabellenartige Anzeige in IE Handhabung.

Answer 6

Mit Inline-Block funktioniert gut für diese Art von Sachen. Nein, IE 6 und IE 7 technisch nicht über display: inline-block, aber man kann das Verhalten mit den folgenden Arten replizieren:

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

Der Schlüssel dazu ist ‚Zoom: 1‘ schaltet die ‚hasLayout‘ Eigenschaft auf dem Element, das die Art und Weise ändert sich der Browser ein Block-Element macht. Der einzige Gotcha mit Inline-Block ist, dass Sie nicht eine Marge von weniger als 4px haben können.

Answer 7

Ich habe CSS wurde mit über einem Jahrzehnt und ich habe nie Gelegenheit Anzeige zu verwenden hatte: table-cell und die einzige, den ich verwenden jemals bedingte Kommentare erweiterte Effekte von IE6 zu verstecken sind.

Ich vermute, dass ein anderer Ansatz Ihr Problem in eine eigen Cross-Browser-Art und Weise lösen würde. Können Sie eine separate Frage offen, welche die Wirkung Sie versuchen zu erreichen, beschreibt und postest den HTML und CSS, die in Firefox zur Zeit funktioniert?

Answer 8

Ein Codebeispiel fot die bedingten Kommentare, dass Benutzer eyelidlessness, freundlich geschrieben

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

Meine 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 mit den CSS wie FireFox tut. IE7 sieht nun das gleiche der Tabelle und TD & TR-Tags. Auf einigen Seiten IE 8 arbeiteten nur 20% der Zeit, so dass ich verwenden [if lt IE 9]

Dies hilft auch, vertical-align Probleme zu glätten, dass IE7 nicht verarbeiten kann.

Answer 9

Ich habe alles versucht, und die einzige Möglichkeit, die ich fand, war, alle Cross-Browser Javascript / Jquery zu verwenden war. Dies ist eine saubere leichte Lösung: hier

Answer 10

IE7 nicht unterstützt display:inline-block; entweder. Eine scheinbare Hack ist zoom: 1; *display: inline; nach Ihrem CSS für display:table-cell;