Is dit deze IE6 bug bekend? Lijkt mij vrij uniek. - Softwareontwikkeling

maandag 3 december 2007 17:10

Acties:

Verwijderd

Topicstarter

Ik heb nu te maken met een bug die ik in de afgelopen 3 jaar nog niet eerder tegen ben gekomen:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <style type="text/css">
    .bug {
        border-width: 0 0 0 2px;
        border-style: solid;
        padding: 1px;
        
    }
    </style>
</head>
<body>
    <div class="bug">
        <div>Test</div>
    </div>
    <div class="bug">
        <div>Test</div>
    </div>
    <div class="bug">
        <div>Test</div>
    </div>
    <div class="bug">
        <div>Test</div>
    </div>
</body>
</html>

heeft dit tot gevolg in Internet Explorer 6:

Afbeeldingslocatie: http://img70.imageshack.us/img70/9445/buglu8.png

De verschuiving naar links is evenredig aan de opgegeven border links

. Zonder enige padding treedt het effect niet op, maar de hoeveelheid padding heeft geen effect. Er wordt alleen verschoven als de inhoud van een <div class="bug"> in een HTML element staat (dus alleen tekst verschuift niet). Als de laatste <div class="bug"> een span bevat, dan verschuift deze 'normaal', als de laatste 2 beiden een span bevatten, dan verschuiven ze beiden evenveel (dus het verschuiven gebeurt ten opzichte van het laatste geneste blok-level element ofzo).

Is dit een bekende bug in Internet Explorer? De fix is in ieder geval om de <div class="bug"> hasLayout te geven, maar ik vind het interessanter om deze bug te kunnen plaatsen in de reeds bekende bugs, of in ieder geval te kunnen verklaren waar deze vandaan komt.

Edit 1:
Ook zonder doctype vindt verschuiving plaats, de tekst blijft dan echter zichtbaar (ook leuk).
Edit 2:
Je kunt het nog simpeler maken slechts een keer de div met class bug te plaatsen. Alle inhoud daarna zal verschuiven.
Edit 3:
Opera 9 en Firefox 2 vertonen geen problemen, IE 5.5 ook niet vreemd genoeg. Ik heb geen IE 7 bij de hand, dus ik ben benieuwd wat die ervan bakt.

[ Voor 11% gewijzigd door Verwijderd op 03-12-2007 17:15 ]

maandag 3 december 2007 17:18

Acties:

Verwijderd

Hmm.. inderdaad heel vreemd, maar wat is precies het nut van de extra div die je in <div class='bug'> staat?

Verder zou je het kunnen oplossen door

code:

.bug * {
        border-width: 0 0 0 2px;
        border-style: solid;
        padding: 1px;
        
    }

of

code:

.bug div {
        border-width: 0 0 0 2px;
        border-style: solid;
        padding: 1px;
        
    }

te gebruiken, maar ik denk niet dat dat de insteek van dit topic is.

edit: IE7 vertoond ook geen problemen

[ Voor 6% gewijzigd door Verwijderd op 03-12-2007 17:22 ]

maandag 3 december 2007 17:30

Acties:

MBV

Ik denk niet dat hij nieuw is:
http://www.positioniseverything.net/explorer/creep.html

maandag 3 december 2007 20:20

Acties:

Verwijderd

Topicstarter

Bedankt MBV, ik had die nog niet gevonden.

@Berend, het ging hier even niet om het eventuele nut, ik wilde een minimale test case maken, en dat was hem. In werkelijkheid is de pagina een heel stuk ingewikkelder, maar voldoet uiteindelijk wel aan de voorwaarden waaronder de bug optreedt. Ik heb net zolang weggehaald totdat ik dit over had.