Comment éviter un élément e d'hériter des propriétés d'un élément B dans IE6/7

J'ai une table qui a une image de fond à répétition sur l'en-tête:Comment éviter un élément e d'hériter des propriétés d'un élément B dans IE6/7

thead tr 
{ 
    border-collapse:collapse; 
    background: #D3D2D2 url(images/background-table-header.gif) repeat-x top; 
}

Et cela fonctionne à travers à la fois Firefox et Internet Explorer, mais si nous voulons que certains en-têtes de colonne montrent la direction de tri, nous décorons le th avec la classe Sorted et la Direction. Et utilisez css pour ajouter une icône de direction.

thead th.Sorted 
    { 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding-left: 0.6em; 
    } 
    thead th.Sorted.Ascending 
    { 
    background-image: url(images/background-table-sorted-column-ascending.gif); 
    } 
    thead th.Sorted.Descending 
    { 
    background-image: url(images/background-table-sorted-column-descending.gif); 
    }

Le problème est que dans Internet Explorer 6 et 7, la couleur de fond de la tr est hérité (trouvé à l'aide d'Internet Explorer Developer Toolbar) pour la th. Ce qui signifie que le th peint #D3D2D2 couleur sur le fond tr. Firefox, Chrome et IE8 n'ont pas ce problème, donc c'est un bug IE6/7 que je soupçonne. J'ai pensé à utiliser un background-color:transparant sur le mais IE6/7 peint juste le fond du corps (on dirait qu'il coupe un trou dans les autres couches entre le corps et le th).

Voici comment cela devrait ressembler à:

correct interpretation of the css/html http://i42.tinypic.com/wjg8q1.png

Et voilà comment il ressemble dans IE6 et IE7:

IE6 and IE7 wrong rendering http://i40.tinypic.com/2i7692c.jpg

est inférieure à la snipppet HTML j'ai créé pour cette question.

<table cellspacing='0'> 
    <thead> 
     <tr> 
     <th>First column</th> 
     <th>Second column</th> 
     <th class="Sorted Ascending">Third column</th> 
     <th>Fourth column</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     <td>Data</td> 
     </tr> 
    </tbody> 
    </table>

Comment pourrais-je résoudre ce problème?

Source

2009-05-07 Davy Landman

Il semble IE a un bug - il rend l'image de fond de tr comme image d'arrière-plan de la cellule, de sorte que l'image de remplacements de la cellule l'image de la rangée. Le même bug existe pour l'élément thead, mais il semble bien fonctionner avec l'élément table.
Ainsi, vous pouvez appliquer votre image de fond à la table au lieu de la ligne d'en-tête:

table 
{ 
    background: #D3D2D2 url(images/background-table-header.gif) repeat-x top; 
}

Parce que l'image de fond est sur la table, il peut se prolonger au-delà de la ligne d'en-tête, donc vous pouvez également définir la couleur de fond des tbody ou son tr s:

tbody 
{ 
    background-color: #fff; 
}

Source

2009-05-07 13:50:37 Kobi

C'est étrange ... parce que cela fonctionne très bien (bien que je ne suis pas d'utiliser des images, il devrait être le même non?

<html> 
<head> 
    <style type="text/css"> 
    thead tr{ 
     background-color:#000; 
        color: #fff; 
    } 
    th.sorted.Ascending{ 
     background-color:#fff; 
        color: #000; 
    } 
    th.sorted.Descending{ 
     background-color:#AAA; 
    } 

    </style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
      <th>First column</th> 
      <th>Second column</th> 
      <th class="Sorted Ascending">Third column</th> 
      <th>Fourth column</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      <td>Data</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

// Modifier // Vous pouvez le faire à la place :

background: #FFFFFF url(http://www.tizag.com/pics/cssT/smallPic.jpg) no-repeat scroll 0 0;

Source

2009-05-07 11:30:35 SeanJA

Merci pour votre réponse, mais ce n'est pas le problème que j'ai, le problème est que je ne veux pas avoir une nouvelle couleur de fond pour les e années que je viens vouloir avoir une petite icône sur le côté gauche et juste être transparent. Parce que le tr dessous a déjà une image de fond répétée. –

il ressemble à un bug dans IE Je l'ai essayé sans image de fond pour la cellule.

thead tr 
{ 
    border-collapse:collapse; 
    background-image:url(http://www.freefoto.com/images/1223/09/1223_09_1---Big-Blue-Sky--Montana--USA_web.jpg); 
    background-color:gray; 
} 

    thead th.Sorted 
    { 
    background-repeat: no-repeat; 
    background-position: center left; /** this line changes the position! */ 
    padding-left: 0.6em; 
    }

, et l'image de backround est repositionnée sur cette cellule! Je suppose que IE rend l'arrière-plan de la ligne une cellule à la fois.
Vous devrez peut-être ajouter un autre élément dans la cellule pour cela.

Ok, une autre idée:
Il semble fonctionner ok si vous mettez l'image de fond sur l'élément table. thead est également buggé. vous pouvez les inclure à la fois (table et tr), en ajoutant la règle:

table 
{ 
    background: #D3D2D2 url(images/background-table-header.gif) repeat-x top; 
}

Source

2009-05-07 11:36:14 Kobi

Oui, IE et FF dessinent l'arrière-plan par cellule (définissez cellpadding sur 5 et vous verrez) mais dans votre problème reste, pourquoi th hérite-t-il de l'image d'arrière-plan tr? Vous proposez un élément supplémentaire dans le côté de la th juste pour être en mesure de définir le contexte sur ce point? J'espère éviter ce genre de solutions, mais je vais essayer .. –

Je sais, mon code ne résout pas ça. C'est un exemple du bug (?). L'image d'arrière-plan du parent de la cellule est déplacée, même si la cellule n'a pas d'image. – Kobi

Vous avez raison Je voulais juste clarifier le fait que le rendu par cellule n'est pas le problème, mais au moment de décider quoi rendre pour la cellule, il utilise la mauvaise logique. Et votre échantillon montre en effet une autre façon de reproduire ce bug. –

Comment éviter un élément e d'hériter des propriétés d'un élément B dans IE6/7

Répondre

Questions connexes