2009-07-23 11 views
0

comportement étrange Ok quand il devrait fonctionner:jQuery DOCTYPE bug CSS avec IE 6 & 7 - mode Quirks

Le problème est que si je ne déclare pas un doctype CSS fonctionne dans IE 6 & 7 mais si je déclare le DOCTYPE ça ne marche 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 & 7 pour voir l'en-tête de table différence

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

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

Donc, après un commentaire utile, j'ai trouvé que le mode quirks est utilisé lorsque je n'ajoute pas le DOCTYPE, qui est l'effet CSS que je veux, mais avec un DOCTYPE, Ugh !!!

tout fonctionne autour? 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; 
} 
+0

De quel DOCTYPE déclarez-vous? – wtaniguchi

+0

ajouté à la publication, thnx :) –

+0

Quel est votre objectif? Voulez-vous que les en-têtes indiquent simplement "Cellule" ou essayez-vous de faire en sorte que les en-têtes restent sur une ligne même si elles sont plus grandes que la cellule d'en-tête? Pour FF, je vois exactement ce à quoi je m'attendais: le texte de l'en-tête est coupé et ne s'enroule pas. Pour IE 7 w/le type de doc je vois exactement ce que je m'attendrais et c'est la même chose dans FF. pour IE 7 sans le type de document Je vois un comportement inattendu, mais c'est parce que IE sans un type de doc par défaut en mode quirks. –

Répondre

4

Tout d'abord, je vous conseille sérieusement vous pour le faire fonctionner en mode standard. S'appuyer sur le mode des caprices pour faire fonctionner n'importe quelle mise en page 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 placer votre DIV dans l'en-tête de votre tableau. Le débordement et la largeur doivent être respectés de cette manière en mode standard, vous donnant l'effet désiré.

+0

Merci j'ai pris votre idée et ça marche bien, merci –