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
- IE >= 6 is not affected in [Almost] Standards mode; only
affected in Quirks mode
- IE6 uses quirks mode if there is an XML declaration prior to the
document type declaration
- Affects: IE6/7 (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 a mode other
than Quirks mode
Potential fixes
- HTML strict or XHTML DOCTYPE
<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 (Quirks mode)
Fixes
* html ... {height:...;} (height
is treated like min-height for IE6, IE7 (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,
IE7
Fixes
- Put entire div in a single line of code
- Add a trailing
<br> before the </div> tag
- Remove any whitespace
between the tags
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
Fixes
- Use
display:inline (has no effect on a floated
element, other than fixing this bug in IE)
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
Fixes
CSS-positioned element showing through an overlaid element
- Caused by the local stacking contexts automatically created by IE
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
Fixes
Short div
- In IE, an empty div will have a minimum height equal to the
font-size of the element
Fixes
overflow:hiddenfont-size:0
Narrow div
- In FF, an empty floated div will collapse
Fixes
- Add a
<br> inside the div
Line-break tags
- In IE 6/7, when 2 lines of text with different font-sizes (or
line-heights?) are
separated by a
<br>, and the first line has a
larger font-size,
the height set aside for the second will be the same as for the first
row.
- Using
<br>'s to separate lines of text limits
the formatting options
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);
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
- 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;
}
1-pixel inconsistency
- When the line-height is repeatedly increased by 1px, the
additional pixel of height will alternately be added either above or
below the text, varying from font-size to font-size and from browser to
browser
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 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 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 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 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 / List box
bottom
------
FF 0 (if set font-size:0 for the floated container)
IE6/7 2px
Safari 1px
Chrome 2px
Opera 12px
Button
FF 1px 1px 1px 1px
IE6/7 1px 1px 1px 1px
Safari 0 0 0 0
Chrome 1px 1px 1px 1px
Opera 0 0 0 0
CSS Expressions
- IE >= 5
- Adds a large overhead, as the expressions are frequently
re-evaluated
selector { property: expression(javascript-expression); }
selector { property: expression(document.all ? 2px : 3px); }
* html
* html selector { styles }
*html selector { styles }
- Does not work in IE7 unless the browser is in Quirks mode
(backwards compatibility mode) (doesn't work in Standards mode or
Almost
Standards mode)
- Otherwise, only IE <= 6 will read this rule (effectively
ignoring the
*
html at the beginning)
*:first-child+html
*:first-child+html selector { styles }
- Does not work in IE7 if the browser is in Quirks mode (backwards
compatibility mode)
- Otherwise, only IE 7 will read this rule (effectively ignoring
the
*:first-child+html
at the beginning)
- 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
