Geek Answers Handbook

Best way to solve css add issue

<div style='width:500px; height:500px; padding:50px;'> </div>

Because the behavior of "padding" on IE and Firefox is different. What is the best way to solve this problem?

+4
source share
3 answers

The IE box model (known as the traditional box model) includes padding and an element’s width / height border.

In the IE box model, a field with a width of 100 pixels, with 2px padding on each side, a border of 3px and an edge of 7px on each side will have a visible width of 114px.

The W3C box model (which is the standard window model) excludes indentation and bordering from the width / height of the element.

In the W3C box model, a box with a width of 100 pixels, with a 2px gasket on each side, a 3px border and a 7px edge on each side will have a visible width of 124px.

Side models http://www.456bereastreet.com/i/box-model.gif

For IE to use the W3C window model (which any other browser uses), your page must be displayed in strict mode. By default, IE is displayed in Quirks mode.

To run Strict mode in IE, you must specify doctype. You can use any of the following doctrines:

HTML4 Strict:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >

XHTML 1.0 Strictly:

 <!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 should be the first that appears on your page. This is before the <html> on a separate line.

Additional information about Quirks / Strict mode:

CSS - Quirks mode and strict mode

+17
source

Not only the different behaviors between Firefox and IE ... they differ even between 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 the browser version. It allows you to create one master style sheet, and then fix any anomalies in others.

+1
source

Another option is to add a conditional comment for the specific browser you are facing, for example:

 <!--[if IE 6]> <style type="text/css"> #thisdiv { width:500px; height:500px; padding:50px; } </style> <![endif]-->

I’m not sure if this is the best way, but I don’t think anyone really understood this. I think that we all do our best and hope that over time everything will get better, therefore this material is not needed.

+1
source

More articles:


All Articles