jQuery bug DOCTYPE CSS avec IE 6 & 7 - mode Quirks

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

  •  19-09-2019
  •  | 
  •  

Question

Ok comportement étrange quand il devrait fonctionner:

Le problème est que si je ne déclare pas un doctype CSS fonctionne dans Internet Explorer 6 et 7, mais si je déclare le DOCTYPE cela ne fonctionne pas. Pourquoi ???

jQuery: 

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

HTML w / DOCTYPE - S'il vous plaît voir dans Firefox et IE 6 et 7 pour voir la différence d'en-tête de table

HTML wo / DOCTYPE - S'il vous plaît voir dans Firefox et IE 6 et 7 pour voir la différence d'en-tête de table

DOCTYPE Je déclare: 

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

Alors, après un commentaire utile trouvé que le mode Quirks est utilisé quand je ne fais pas le DOCTYPE, qui est l'effet CSS que je veux, mais avec un DOCTYPE, Ugh !!!

les contournements de travail? Suggestions?

Solution, 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;
}
Était-ce utile?

La solution

Tout d'abord, je vous conseille sérieusement de le faire fonctionner en mode standard. En se fondant sur le mode Quirks pour faire une mise en page « travail juste » n'est pas une approche très saine.

Vous pouvez envelopper votre contenu dans un élément de bloc, disons un élément DIV, puis mettez votre DIV dans votre tête de table. Trop-plein et la largeur doivent être respectées de cette façon en mode standard, vous donnant l'effet désiré.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top