Menu
<div style='width:500px; height:500px; padding:50px;'> </div>
As the behaviors of 'padding' on IE and Firefox are different. What is the best way to solve this problem?
282
The IE box model (known as the traditional box model), includes the padding and border in the width/height of an element.
Under the IE box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 114px.
The W3C box model (which is the standard box model), excludes the padding and border from the width/height of an element.
Under the W3C box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 124px.
(source: 456bereastreet.com)
In order to make IE use the W3C box model (which is what every other browser uses), your page needs to be rendered in Strict mode. By default, IE renders in Quirks mode.
In order to trigger Strict mode in IE, you must specify a doctype. You can use any of the following doctypes:
HTML4 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Your doctype must be the first thing to appear on your page. It is even before the <html> tag, on its own line.
More information about Quirks/Strict mode here:
CSS - Quirks mode and strict mode
128
Not only are the behaviors different between Firefox and IE...they're different even between the different versions of IE.
The best approach is to use CSS selectors rather than inline styles and use IE conditional comments to load different stylesheets based on browser version. It allows you to create one master stylesheet and then fix any anomolies in the others.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
