écart de pixel dans ie

Question

J'ai quatre Div placé en utilisant absolue positionnement, chacun d'eux est une frontière d'un rectangle qu'ils forment une fois regroupés, afin de ressembler si un élément Dom sur la page est sélectionnée (ce imiter le comportement de frontière en utilisant Div comme css superpositions).

• La gauche on a une bordure gauche réglé sur "rouge solide 4px" , largeur de 0p x et une hauteur égale à la la hauteur de l'élément sélectionné Dom .

• La partie supérieure une partie supérieure a une frontière réglé sur « rouge solide 4px », une hauteur de 0px et une largeur égale à la largeur de l'élément sélectionné Dom.

etc. vous pouvez voir où cela va.

Je sais que cela est étrange, mais il est très utile, voir Aardvark pour un exemple.

Voici donc comment il ressemble à FF, Opera, Safari et chrome:

texte alt http://img243.imageshack.us/img243/429/captureyv .png

et voici comment il ressemble à soit 8 :

texte alt http://img190.imageshack.us/img190/7196/capture1dv .png

J'ai immédiatement pensé à un problème de modèle de boîte, mais il est pas supposé rendre plus étroit? et de toute façon, je jquery pour obtenir la largeur et la hauteur, qui est censé éviter ce genre de problème. Je suis allé à travers le les plus connus des bugs à savoir , mais ne peut pas trouver une correspondance.

Que pensez-vous?

ps:. C'est un bookmarklet, bien sûr j'ai essayé de changer le type de document sur un fichier local et il a travaillé, mais dans la production, je ne sera pas en mesure de

J'utilise la barre d'outils pour dev-à-dire dessiner une bordure autour de l'élément positionné comme absolu:

texte alt http://img21.imageshack.us/img21/3425/capture2uc .png

On peut voir l'écart.

Answer 1

Vérifier la div « réelle » hauteur du BOTTOM « frontière » avec la barre d'outils des développeurs de IE8. Assurez-vous qu'il est "0".

Effectuez les opérations suivantes pour que div bas.

<style type="text/css">
    #bottomBorder{
        /* Adding '!important' to each CSS rule 
           will make sure nothing else in your code is 'overwriting'
           that rule. (doesn't work for IE6)
        */
        line-height:0 !important; 
        font-size:0 !important;
        height:0 !important;
        border-bottom:solid 4px red;
        position:absolute;
    }
</style>

Ou essayez:

<style type="text/css">
    #bottomBorder{
        border-top:solid 4px red;
    }
</style>

Ce que je pense est que IE ne vous laissera pas mettre un div 0px hauteur. Je l'ai vu sur divs avant.

Answer 2

Je pense que vous devriez jouer avec votre DOCTYPE comme cela devient habituellement IE va dans la bonne direction

Answer 3

Je suppose que cette question a quelque chose à voir avec les marges et le rembourrage. Avez-vous des informations ou des entretoises à l'intérieur de vos DIVs? Cela pourrait entraîner un espace supplémentaire que vous ne tenaient pas compte.

Je régler les divs avec margin: 0; Effondrement de la frontière: effondrement;

En outre, comme vous l'aviez mentionné, sur votre DIV bas, vous devriez avoir cet ensemble à sa bordure supérieure pour tenter de prévenir de telles lacunes de se produire en raison de marges ou des espacement dans la DIV lui-même.

Answer 4

pourrait-il que IE8 n'inclut pas la hauteur de la frontière dans le cadre de son paramètre de hauteur? Essayez d'ajouter la taille de la frontière.

Answer 5

Ok, j'ai pas de solution pour l'instant, mais je n'affiche que la partie supérieure de la frontière div bas au lieu de son fond de frontière et il semble bon enought pour l'instant. Si quelqu'un sait mieux, il est toujours le bienvenu.