CSS - Les divs positionnés de façon absolue ne collent pas au bord droit quand "right: 0px" dans IE6

Question

J'ai trouvé un exemple de here utilisant des coins arrondis en utilisant une seule image. J'ai ceci fonctionnant parfaitement dans IE7 + et FireFox.

Voici un exemple mise en page d'onglet:

<div class="tab"><div class="corner TL"></div><div class="corner TR"></div> 
    <div class="inner"><p>Test 1</p></div> 
</div> 
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div> 
    <div class="inner"><p>Test - 2</p></div> 
</div> 
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div> 
    <div class="inner"><p>Test - 3</p></div> 
</div> 

Ce qui suit est mon style CSS:

.corner 
{ 
     background:url(../Images/LightCorner.gif); 
     position:absolute; 
     width:13px; 
     height:13px; 
     overflow:hidden;  
} 

.inner 
{ 
     position:relative; 
     padding:13px; 
     margin:0px; 
} 

.inner p 
{ 
     padding:0px; 
} 

.tab 
{ 
     color:#FFF; 
     float:left; 
     font-weight:bold; 
     margin-right:5px; 
     position:relative; 
     text-align:center; 
} 

.tab p 
{ 
     margin:0px; 
     padding:0px; 
} 

.tab 
{ 
     background:#B5B5B5; 
} 


.TL 
{ 
     top:0px; 
     left:0px; 
     background-position:0px 0px; 
} 
.TR 
{ 
     top:0px; 
     right:0px; 
     background-position:-13px 0px; 
} 

.TL, .TR 
{ 
     margin:0px; 
     padding:0px; 
     position:absolute; 
} 

Le problème est que lorsque la largeur de mon div est un même nombre, je me retrouve avec un 1px ri frontière ght-hand, comme si la div en haut à droite était positionnée correctement: 1px. Lorsque la largeur est impaire nombre je ne vois pas la couleur grise de la main droite de l'onglet et le div est affiché comme prévu.

L'image que j'utilise peut être trouvée here. Un exemple complet peut être trouvé here.

Pourquoi le div en haut à droite n'est pas positionné correctement à droite: 0px? Pourquoi est-ce que je me retrouve avec un écart 1px dans IE6 lorsque la largeur de la tabulation est un nombre pair?

Answer 1

Le problème est que lorsque la largeur de mon div est un nombre pair, je me retrouve avec une 1px frontière à la main droite, comme si la div droite supérieure est actuellement positionnée comme à droite: 1px. Lorsque la largeur est un nombre impair je ne vois pas la main droite couleur grise de l'onglet et le div est affiché comme prévu.

Il n'y a rien avec votre code, il est un bogue dans Internet Explorer 6. Quand les choses de positionnement absolu à droite ou vers le bas, la position réelle seront arrondis à 2px, donnant 1px « marge » quand la largeur/hauteur totale est paire (ou impaire). Malheureusement, vous avez besoin de JavaScript pour résoudre ce problème.

Vous pouvez vérifier this example (écrit par moi) et redimensionner lentement la fenêtre IE6, pixel par pixel. Vous remarquerez que la position des cases inférieure et droite ne sera mise à jour qu'une fois tous les deux pixels. Un autre gars a également trouvé et documenté ce bug sur his site.

J'ai déjà écrit un pour fixer le calcul de la hauteur lors du positionnement haut et bas, et en laissant la hauteur comme auto. J'utilise this script sur this site. Dans votre cause, ce script peut être modifié pour calculer le décalage de gauche basé sur available_width-(right+width).

Answer 2

Avez-vous essayé

corps

{ margin: 0; }

Answer 3

Essayez avec:

right:-1px; 

pour IE6