2010-01-13 4 views
3

Pour ce rapport créé en HTML CSS & les bordures gauche sont en train de disparaître dans IE 7 & 6. Ils apparaissent correctement dans IE 8, Firefox, Chrome, Opera, etc.manquant bordure gauche dans IE 7

I appliquer le style je suis avec trois classes CSS différentes:

.LeftBorder 
{ 
    border-left: 1px solid black; 
} 
.LeftBorderHeadingShaded 
{ 
    background-color: gray; 
    color: black; 
    text-align: left; 
    font-weight: bold; 
    border-top: 2px solid black; 
    border-left: 1px solid black; 
} 
.noshadeLeftBorder 
{ 
    background-color: white; 
    border-left: 1px solid black; 
} 

et ces classes sont appliquées aux balises TR et TD spécifiques, mais la frontière gauche ne parvient pas à apparaître sur l'un de ceux-ci. Certaines des frontières inférieures manquent à, mais ce n'est pas aussi gros d'un accord.

J'ai effectué une capture d'écran montrant IE 7, 6 et 8 côte à côte. J'ai encerclé la zone à problèmes. Voici le full HTML/CSS.

Internet Explorer sucks at CSS http://www.mckeeth.org/test/missing-border.png

+1

Gardez à l'esprit IE6 a des problèmes avec plusieurs classes sur le même élément. Il ne semble pas être la raison de votre problème, car il ne fonctionne pas dans IE 7 non plus, mais quand même. –

+0

Je n'applique qu'une classe par élément. Différents éléments ont juste des classes différentes. –

+0

Pour clarifier ce dont parle Pekka, il n'est pas nécessaire que les éléments ayant plusieurs classes comme '

' utilisent plusieurs sélecteurs de classes dans le CSS comme 'div.class-one.class-two {/ * properties * /}'. Ce sélecteur devrait évaluer correctement (et fait dans FF, Safari) mais ne fonctionne pas dans IE. – prodigitalson

Répondre

2

EDIT:

Eh bien, ce sélecteur signifie simplement « appliquer les propriétés des éléments du type td qui sont les enfants d'un élément tr avec la classe LeftBorder ». Si ce n'est pas juste sur votre structure, je m'excuse pour la confusion que je viens de jeter un coup d'oeil à votre code dans le bug de feu et j'ai vu un tr avec la classe LeftBorder. La ligne de fond est bien que vous devez appliquer la frontière à td et/ou table ... pas tr.

Eh bien d'abord je ne pense pas que vous êtes censé appliquer les frontières à un tr ils sont sur le td si vous avez besoin de les cibler comme tr.LeftBorder td

+0

+1 Yup, 'border' sur un' tr' est définitivement faux. –

+0

La solution consistait à appliquer les styles * LeftBorder * au premier ** TD ** dans le ** TR **. Bien sûr, certains de ces styles ont d'autres formats, mais cela fonctionnera. –