Browser-Specific Behavior

IE6 vs IE7 ...

Padding and border width
  • CSS 2.1 Specification: Total width = width + padding + border + margin
  • Used by FF, Safari, ...
  • IE: Total width = width + margin
  • Padding and border occupy space within the element width
  • Applies to explicit widths (px, %) and default widths
  • Affects: IE6/7/8 (Quirks mode)

Fixes

  • Separate the padding / border and width / height into separate container elements
  • Add CSS hacks to correct the width / height for IE
  • Use [Almost] Standards mode

Potential fixes

  • <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  • <?xml version="1.0" encoding="iso-8859-1"?>
min-height
  • min-height is not supported
  • Affects: IE6, IE7/8 (Quirks mode)

Fixes

  • * html ... {height:...;}   (height is treated like min-height for IE6, IE7/8 (Q), Opera (Q))
Extra 3-pixel bottom margin
  • Extra 3-pixel bottom margin for a div containing an <img> or <a> with whitespace between the tags
  • Affects: IE6/7/8, FF

Fixes

  • Put entire div in a single line of code
  • Remove any whitespace between the tags

Potential fixes

  • Add a trailing <br> before the </div> tag
Horizontal margin doubled for floated element
  • When a floated element has a margin in the same direction that it's floated, and the element is the first one floated in that direction in the parent element (i.e. the element is floated against the edge of the parent div), the margin is doubled
  • Affects: IE6

Fixes

  • Use display:inline (has no effect on a floated element, other than fixing this bug in IE. Floated elements are implicitly block-level, regardless of the value set for the display property.)
Local stacking context
  • Local stacking context created for every absolutely-positioned element (relative, absolute), even if no z-index (or a z-index of auto) is specified
  • Affects: IE6/7, IE8 (compatibilty view)

Fixes

  • None
CSS-positioned element showing through an overlaid element
  • Caused by the local stacking contexts automatically created by IE
  • Affects: IE6/7, IE8 (compatibilty view)

Fixes

  • Remove the use of CSS positioning
  • Specify a z-index for the separate local-stacking-contexts of both elements
  • Reverse the source order of the elements
HTML <select> showing through an overlaid element
  • Affects: IE6

Fixes

  • None

Short div

  • In IE, an empty div with a specified height > 0 will have a minimum height equal to the font-size of the element
  • Affects: IE6, IE7/8 (Quirks mode), IE7 ([A]S mode, somewhat)

Fixes

  • IE6/7/8: overflow:hidden;
  • IE6/7, IE8 (Q (mostly fixes it)): font-size:0; line-height:0;
  • IE7 ([A]S): font-size:0;
  • IE6/7/8 [A]S mode: Add an empty child div with height:0; (and for IE6: overflow:hidden;)

Narrow div

  • In FF, an empty floated div will collapse

Fixes

  • Add a <br> inside the div

Alpha transparency for HTML elements

.transparent { filter:alpha(opacity=50); opacity:0.5; }
  • A value of 0 means completely transparent
  • filter: IE >= 4
  • opacity: FF, Opera
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
  • IE >= 5.5

PNG alpha transparency

  • Can be used in IE <= 6 by adding the following:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='...', sizingMethod='...');

    sizingMethod
        crop  :  Clips the image to fit the object
        scale :  Resizes the image to fit the object
        image :  Resizes the object to fit the image
  • Only works for bg images (has no effect if applied to an img element)
  • Apply "background:none" to remove the default bg image
  • There doesn't appear to be a way to display an image from the right or bottom using AlphaImageLoader, or to display it at an offset

Duplicate properties

  • If there are two identical properties in a CSS rule, IE <= 6 only applies the last one
/* In this example, a height of 10 will be used for IE <= 6 */
.box {
height:12px !important;
height:10px;
}

Implicit margins in HTML form elements

  • Screenshot
  • Not a part of the element itself, and as such cannot be overridden using CSS
Text box
FF        0 0 0 0
IE6/7/8   1px 0 1px 0
Safari    0 0 0 0
Chrome    0 0 0 0
Opera     0 0 0 0 
  • If a small height (or no height) is specified and the font-size is small, the top margin  may be more than 1px; but it will always be at least 1px
Textarea
FF        0 0 0 0
IE6/7/8   1px 0 1px 0
Safari    0 0 0 0
Chrome    0 0 0 0
Opera     0 0 0 0 
Checkbox
                            image       area
                            -----       ----
FF        0 0 0 0             13 x 13
IE6/7/8   4px 3px 3px 4px     13 x 13     20 x 20
Safari    0 0 0 0             12 x 12
Chrome    0 0 0 0             13 x 13
Opera     2px 2px 1px 1px     14 x 14     17 x 17 
Radio button
                            image       area
                            -----       ----
FF        0 0 0 0             13 x 13
IE6/7/8   4px 3px 4px 5px     12 x 12     20 x 20
Safari    0 0 0 0             12 x 13
Chrome    0 0 0 0             13 x 13
Opera     2px 2px 1px 1px     14 x 14     17 x 17 
Select box
bottom
------
FF        0       (if set font-size:0 for the floated container)
IE6/7/8   0
Safari    0
Chrome    0
Opera     0 
List box
bottom
------
FF        0       (if set font-size:0 for the floated container)
IE6/7/8   2px
Safari    1px
Chrome    2px
Opera     12px 
Button
FF        1px 1px 1px 1px
IE6/7/8   1px 1px 1px 1px
Safari    0 0 0 0
Chrome    1px 1px 1px 1px
Opera     1px 1px 1px 1px

CSS Expressions

selector { property: expression( javascript-expression ); }
  • IE >= 5
  • Adds a large overhead, as the expressions are frequently re-evaluated
div { width: expression( document.all ? 2px : 3px ); }

* html

* html selector { styles }
*html selector { styles }
  • Supported: IE <= 6, IE7 (Quirks mode)
  • When supported, the * html at the beginning is effectively ignored

*:first-child+html

*:first-child+html selector { styles }
  • Supported: IE7 ([Almost] Standards mode), IE8 (compatibility view)
  • When supported, the *:first-child+html at the beginning is effectively ignored
  • Cannot be combined with * html into a single CSS rule, as it would fail in IE 6

Misc

  • For IE6, have to specify a width for block-mode <a> tags, or else they don't occupy the entire width

 

Resources URL: 
notes/css/resources
Sources URL: 
notes/css/sources

See Also