IE7 e la proprietà della cella tabella CSS

Question

Quindi adoro quando la mia applicazione funziona alla grande in Firefox, ma poi la apro in IE e ... No, per favore riprova.

Il problema che sto riscontrando è che sto impostando una proprietà di visualizzazione CSS su none o table-cell con JavaScript.

Inizialmente stavo usando display: block , ma Firefox lo rendeva strano senza la proprietà table-cell .

Mi piacerebbe farlo senza aggiungere un hack in JavaScript per testare IE. Qualche suggerimento?

Grazie.

Answer 1

Un buon modo per risolvere questa impostazione del valore display su '' :

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

Il valore vuoto fa ritornare lo stile al suo valore predefinito. Questa soluzione funziona su tutti i principali browser.

Answer 2

Ho risolto questo problema usando jQuery:

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

lo script sopra presuppone che tu abbia div usando uno stile come:

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

Answer 3

Ho avuto lo stesso problema e utilizzato

*float: left; 

" * " indica solo IE

Answer 4

Bene, IE7 non ha display: table (-cell / -row) quindi dovrai capire qualcos'altro o fare il targeting per browser (che sono d'accordo, è un cattivo hack). Come soluzione rapida (non so cosa stai cercando di ottenere, per quanto riguarda l'aspetto) potresti provare display: inline-block e vedere come appare.

Forse potresti trovare un modo per eseguire display: block e risolvere il problema di "quoting Firefox che lo rende strano" anziché? Puoi descrivere esattamente cosa intendi con il rendering strano?

Answer 5

Non hai mai bisogno di Javascript per testare IE, usa commenti condizionali .

Potresti guardare la soluzione questi ragazzi hanno trovato per gestire la visualizzazione simile a una tabella in IE.

Answer 6

L'uso di inline-block funziona bene per questo tipo di cose. No, IE 6 e IE 7 tecnicamente non hanno display: inline-block, ma puoi replicare il comportamento con i seguenti stili:

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

La chiave di ciò è 'zoom: 1' attiva / disattiva la proprietà 'hasLayout' sull'elemento che cambia il modo in cui il browser esegue il rendering di un elemento a livello di blocco. L'unico gotcha con blocco inline è che non puoi avere un margine inferiore a 4px.

Answer 7

Uso CSS da oltre un decennio e non ho mai avuto occasione di usare display: table-cell, e le uniche volte in cui utilizzo commenti condizionali sono nascondere effetti avanzati da IE6.

Sospetto che un approccio diverso risolva il tuo problema in modo intrinsecamente trasversale. Puoi aprire una domanda separata che descriva l'effetto che stai cercando di ottenere e pubblicare l'HTML e il CSS che funzionano attualmente in Firefox?

Answer 8

Un esempio di codice per i commenti condizionali che l'utente non ha palpebre, gentilmente pubblicato

" [if lt IE 8] " Funziona solo se il browser è IE inferiore a IE8 perché IE8 lo fa correttamente. Con i commenti condizionali, IE7 organizza i DIV in modo perfettamente orizzontale ... 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> 

Il mio 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 e 9 Lavorano con i CSS come FireFox. IE7 sembra ora lo stesso usando la tabella e TD & amp; Tag TR. In alcune pagine IE 8 ha funzionato solo il 20% delle volte, quindi ho usato [if lt IE 9]

Questo aiuta anche ad appianare i problemi di allineamento verticale che IE7 non può gestire.

Answer 9

Ho provato di tutto e l'unico modo per scoprire che era tutto cross-browser era usare Javascript / Jquery. Questa è una soluzione pulita e leggera: fai clic qui

Answer 10

IE7 non supporta la visualizzazione : inline-block; . Un trucco evidente è lo zoom : 1; * display: inline; dopo il tuo css per display:table-cell;