jQuery bug DOCTYPE CSS con IE 6 e 7 - quirks mode

StackOverflow https://stackoverflow.com/questions/1173771

  •  19-09-2019
  •  | 
  •  

Domanda

Ok strano comportamento quando dovrebbe funzionare:

Il problema è che se io non dichiaro un doctype CSS funziona in IE 6 e 7 ma se dichiaro il DOCTYPE non funziona. Perchè ???

jQuery: 

$('tr:first-child').children().css({
   'width': settings.minWidth + 'px',
   'height': settings.tableHeaderHeight + 'px',
   'overflow': 'hidden',
   'white-space': 'nowrap',
   'color': 'blue'
});

HTML w / DOCTYPE - Si prega di visualizzare in Firefox e IE 6 e 7 per vedere la differenza intestazione della tabella

HTML wo / DOCTYPE - Si prega di visualizzare in Firefox e IE 6 e 7 per vedere la differenza intestazione della tabella

DOCTYPE sto dichiarando: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Così, dopo un commento utile ho trovato che quirks mode viene utilizzato quando non aggiungo il DOCTYPE, che è l'effetto CSS che voglio, ma con un DOCTYPE, uffa !!!

eventuali arounds di lavoro? Suggerimenti?

Soluzione, YEAH !!!

jQuery 

// This adds a div tag around the table header text 
//  - IE white-space bug in standard mode
$('table.className tr th').wrapInner(
  "<div class='ie_correct_header_whitespace'></div>"
);

CSS 

.ie_correct_header_whitespace {
   white-space: nowrap;
}
È stato utile?

Soluzione

Prima di tutto, ho seriamente Ti consigliamo di farlo funzionare in modalità standard. Basandosi su quirks mode per fare qualsiasi layout 'solo di lavoro' non è un approccio molto sano.

È possibile avvolgere i tuoi contenuti in un elemento di blocco, diciamo un elemento DIV, e poi mettere il vostro DIV nella intestazione della tabella. Overflow e larghezza dovrebbero essere rispettati in questo modo in modalità standard, dando l'effetto desiderato.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top