Internet Explorer Win Bugs

From CSS Discuss

Jump to: navigation, search

Resources

Collections
- Explorer Exposed! Position is Everything's weird and wonderful world of Internet Explorer.
- Bug Report - Archives The Bug Report system on Quirksmode is entirely dedicated to finding, mending and publishing CSS and Java Script browser bugs
Overview
- On having layout A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element "layout".
Specifics
- Pseudo classes and elements How IE misunderstands CSS pseudo stuff.

Single Bug Pages

Multiple Id Class Bug

IE7 Bugs

IE7

IE Font Sizing Bugs

Inheritance

Simply put, IE for Windows' relative font size inheritance cascade is broken. The simplest workaround is to not use relative sizes, such as using keywords instead, except on base level containers. If you find it necessary to size through cascade, you'll find % works more reliably than ems. If you prefer using ems to %, then at least set the initial size using % instead, thus: html {font-size: 100.01%;} or body {font-size: 100.01%;}. This eliminates most size inheritance errors. Using 100.01% instead of 100% avoids size inheritance bugs in some ancient versions of Opera.

Keyword Sizes

IE versions prior to 6 assign larger sizes to keywords than IE6 does in standards mode. Specifying CSS {font-size: small;} in IE5 will render the same as <font size="3">, while in IE6 standards mode it will render the same as <font size="2">, the same as specified in the CSS specs. Those who wish to use keywords and keep sizes the same in IE5 as other browsers can use a voice-family hack such as the following:

     body {font-size: small;
            voice-family: "\"}\"";
            voice-family: inherit;
            font-size: medium;}

IE Positioning Bugs

IE may add unwanted space in several circumstances

When the line breaks after an image

Keep the div's closing tag on the same line as the image close thus:

     <div id="headbanner"><img src="headimage.jpg" alt=""></div>

Line break between list items

Unwanted space in horizontal lists usually can be prevented by either keeping every <li> per list on one line in your markup, or including in your CSS...

* html li {margin-left:-3px;}

...which affects only IE. Occasionally adding a border to the bottom of the list item will fix this in IE 6.

"Empty" div

Use the following construct for all empty divs instead of . Empty divs, with only a comment inside, will not add any default dimensions:

     <div class="nospacebreak"><!-- --></div>

Relative heights for contained & positioned elements

An absolutely-positioned div, with a relative (percentage) height, and inside a relative-positioned div, should match its height to that of the containing element. Firefox and Safari handle this correctly, as does IE5.0. In IE5.5 and IE6.0, the relative height will be ignored, and the inner div sized to fit its content only. This is not a bug I have seen mentioned anywhere else, and I know of no workarounds. The code below shows this behavior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style='position:relative;'>
<div style='position:absolute; left:0px; top:0px; width:10px; height:100%; background:red;'></div>
Lorem ipsum dolor sit amet consecteteur adipiscing elit
Lorem ipsum dolor sit amet consecteteur adipiscing elit
Lorem ipsum dolor sit amet consecteteur adipiscing elit
Lorem ipsum dolor sit amet consecteteur adipiscing elit
Lorem ipsum dolor sit amet consecteteur adipiscing elit
Lorem ipsum dolor sit amet consecteteur adipiscing elit
</div>
</body>
</html>

Textarea set to 100% width

When a textarea has 100% width set on it, it will expand in width when the user types into it. Wrapping a fieldset around it sometimes fixes it. See these links for more info:

Last Class bug

Confusion arises for IE6 and IE7 when the last class of a multiple class selection is the same as the last class of another multiple class selection.

.girl.cover {
	background: green;
	}
.boy.cover {
	background: red;
	}

See demonstration here

Quick fix is to swap the order so that the unique class is listed last, like this...

.cover.girl {
	background: green;
	}
.cover.boy {
	background: red;
	}

Float bugs

Content disappears

This bug may appear when a div contains floating elements. It can be worked around by assigning the container div a height or line-height. Thus this bug can be attacked by applying the so called Holly Hack.

For a detailed discussion and alternative workarounds:

(This is far from everything that's wrong with IE)