[CSS] Dziwny bug w IE (position relative i border)

sztacho · Post autor: **sztacho** » ndz maja 06, 2007 10:16 am

Witam

Natrafiłem na ciekawy bug w IE, a jakoś nie widziałem go nigdzie opisanego (jakoś specjalnie też nie szukałem, ale nie widzę go na browsehappy). Otóż, mam w body kod

Kod: Zaznacz cały

<body>
    <div id="container">
        <div id="top">jakiś top</div>
        <div id="cont">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
            <div>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
            </div>
        </div>
    </div>
</body>

a w CSS

Kod: Zaznacz cały

        #container
        {
            width: 750px;
            border: 1px solid #000;
        }
        
        #top
        {
            height: 150px;
            border: 1px solid red;
        }
        
        #cont
        {
            position: relative;
            top: -1em;
            padding: 2em;
        }
        
        #cont div
        {
            font-weight: bold;
            margin: 1em;            
            border-bottom: 1px solid #000;    /* #1 */
        }

Pod FF i Operą wszystko wygląda jak należy, ale w IE6 (pod IE7 jest ok) nie wyświetla dolnego obramowania elementy div w #cont (w CSS linia zaznaczona jako #1). Pojawia się ono natomiast, gdy dodam dla tego elementu jeszcze jakieś obramowanie (górne albo boczne) lub gdy dla #cont usunę pozycjonowanie.
Spotkał się ktoś z Was z takim problemem? Wiem, że można go dosyć łatwo obejść dodając np. górne obramowanie w kolorze tła, ale co zrobić, gdy tło nie będzie jednolite?

123456 · Post autor: **123456** » pt maja 11, 2007 3:58 pm

Spróbuj z takim czymś:

Kod: Zaznacz cały

#cont div {
     font-weight: bold;
     margin: 1em; 
     border-bottom: 1px solid #000; 
     display:inline-block;
}

Dodatkową linijkę przekazuj tylko dla IE.

[CSS] Dziwny bug w IE (position relative i border)

[CSS] Dziwny bug w IE (position relative i border)

Re: [CSS] Dziwny bug w IE (position relative i border)