Never assume that other browsers will have the same settings by default as your own.
The most obvious examples are the features the user can change in the browser's preference settings: font face,
font size, foreground and background colours.
If you want your web page to look identical across different browsers, set all these explicitly in your
stylesheet.
Or, if you want to respect the user's preferences, don't assume that those preferences are the same as your
own!
font-size:2em
and also all headers <h1>
,
<h2>
etc will come out the same size on some browsers.title
attributes to provide more info about things, bear in mind that not all browsers
can show tooltips. And even the browsers than can, often have settings that allow the user to suppress them!But those are not the only differences. There are other cases where browsers have different defaults, and where
you can either respect those differences by not assuming anything, or specify the offending properties in your
stylesheet.
There are many "reset stylesheets" to be found on the web, that reset properties of all elements to the same value,
but not only are those overkill - they make your document look like plain text, really - they also don't address
all of these specific differences:
border-width:10px; border-style:outset
, Chrome makes table
borders darker than
div
borders. (Example)border:1px solid
will set the colour to the same value as the foreground colour, even if you
don't specify it explicitly.<img>
in an
<a>
will display a border around the image, while most other browsers will not.
(Example)<input>
element in a parent that has italic text, Opera will display the text
in the input as italic, while most other browsers will show the text normally.input {font-style:normal}
or input {font-style:inherit}
in your
stylesheet.{font-size:0}
, some browsers will not hide the text; they
will display it at the minimum font size.{display:none}
, {position:absolute; right:100%}
or
{text-indent:-100em}
.transform
), you should set its overflow
explicitly. (Example)Other differences, per browser. Note: the browser names are rough groupings, mouse over them to see details
Browser | colour | height on screen | top/bottom margin | with noshade |
---|---|---|---|---|
Chrome | color attr or border-color style |
same as SIZE | 1/2 em (*) | bg is background-color or color attr |
Firefox | border-color style or color style or color attr |
same as SIZE | 1/2 em | rounded corners; bg is border-color style or color style or color
attr |
IE | border-color style or black if a color attr is present |
equal to SIZE+2 | 1/2 em | bg is background-color style or black if a color attr is present |
Opera | color attr or border-color style or color style |
same as SIZE | 1/2 em (*) | bg is background-color or color attr |
Konqueror | border-color style or color attr |
same as SIZE | 12 pixels | bg is border-color style or color attr |
(*) Opera and Safari round the values down (if 1em=15px, the margin will be 7px). Other browsers keep
the total margin at 1em (so top=7px and bottom=8px).
In other words, if you want a hr to look the same across browsers, set all the styles explicitly; don't rely on the defaults. Example:
hr {color:#888; border:1px solid; border-color:#555 #888 #bbb; box-sizing:content-box; margin:.5em 0;}
hr[noshade] {background:#888; border-radius:0; border:1px solid #888;}
Browser | dfn | abbr, acronym | textarea | listing | xmp | plaintext |
---|---|---|---|---|---|---|
Chrome | italic | normal text | 13px font | block, margins | block, margins | block, margins |
Firefox | italic | dotted underline | monospace font, size | block, margins | block, margins | block, margins |
IE | italic | dotted underline | 13px font | inline, smaller font | inline | block |
Opera | italic | dotted underline | ? | block | block, margins | block |
Konqueror | normal | small caps | ? | block, margins | block, margins | block, margins |
Browser | font-family: monospace |
---|---|
Chrome | font from settings; size 3px less than the parent |
Firefox | font and size from settings |
IE | Chooses its own font |
Opera | font from settings, keeps size |
Konqueror | font and size from settings |
Note: IE7 and IE8 let the user choose which font to use for fixed-width
fonts. However, this font is only used for elements like <pre>
, <kbd>
,
<tt>
and so on. For style="font-family: monospace"
or <font
face="monospace">
IE disregards the user preferences and chooses a font itself. Also the relative size
seems to be different.
Browser | "Light" fonts max weight¹ | "Bold" fonts min weight | style of <b> | effect of "lighter" | effect of "bolder" |
---|---|---|---|---|---|
Chrome | n.a. | 700 | bold | (seems to depend on font) | |
Firefox | 300 | 600 | bolder | subtract 200 | bolder variant |
IE | 300 | 600 | bolder | lighter variant | bolder variant |
Opera | n.a. | 600 | bolder | subtract 200 | add 200 |
Konqueror | n.a. | 600 | bold | same as normal | same as bold |
¹ Some fonts, like DejaVu Sans, have three weights: light, regular and bold; this column shows the largest font-weight
that comes out light. Not all browsers support this; the column says "n.a." in those cases.
The box-sizing model for all elements is supposed to be content-box
. That is, when calculating
sizes, the content area is supposed to be the size of the width or height property, not counting the border.
However, many browsers apply the border-box
model on some random elements, that is, they use the width
or height properties for the outer size of the element, making the content area smaller.
Browser | hr | td, th | input type="file" | input type="radio" |
---|---|---|---|---|
Chrome | ✓ | ✓ | ✓ | border-box¹ |
Firefox | border-box | ✓ | ✓ | n.a.² |
IE | ✓ | ✓ | border-box | ✓ |
Opera | ✓ | border-box³ | border-box | border-box |
Konqueror | ✓ | border-box³ | n.a.² | n.a.² |
¹ Doesn't actually draw the border though.
² n.a. means the element doesn't respond to this style.
³ Only the height; the width is calculated according to the standard!
Browser | <small> | <big> |
---|---|---|
Chrome | 83.3333% | 120% |
Firefox <=52 | 66.6667% | 150% |
current Firefox | 83.3333% | 120% |
IE | t.b.d. | t.b.a |
Opera | t.b.d. | t.b.a |
Konqueror | 83.3333% | 120% |
Browser | <ul> or <ol> | <menu> | <dl> |
---|---|---|---|
Chrome | suppressed margins | no effect | no effect |
Firefox | suppressed margins | suppressed margins | suppressed margins |
IE | newline before | newline before | newline before |
Opera | suppressed margins | no effect | suppressed margins |
Konqueror | suppressed margins | suppressed margins | no effect |