Recently, I have done some html/css programming. I encounter a common problem--compatibility. Despite the standardization of HTML and CSS, different browsers provide supports of different level. In addition, some browsers add some specific features which are not supported by others.
W3C standardize CSS. However, box model in some browsers is different from the standard.
Another big different part is event handling. W3C Dom specification defines how to handle event. Microsoft DOM does the same thing, but in different way. What's worse, Mozilla Firefox handles event in completely different way.
Details:
(1) css float property
IE and firefox explains this property in different ways.
One simple example:
<div style="height:400px; width:400px; border:dashed 1px;">
<div style="width:100px;height:100%;background-color:blue;float:left;">100px</div>
<div style="width:100px;height:100%; background-color:gray;">100px</div>
</div>
It behaves differently in IE and Firefox. So IE and Firefox have different ideas about where a div block should be placed.
(2) size of box model
A simple example:
<div style="height:100px; width:300px; border:dashed 1px;">
<div style="width:100px;height:200%;background-color:blue;float:left;">100px</div>
<div style="width:100px;height:200%; background-color:gray;float:left;">100px</div>
</div>
In IE, the size of outer box is adjusted to contain inner boxes. However, in Firefox, the outer box is not adjusted even if its inner boxes exceed its area.
(3) event model
In IE, the object window.event contains information about the event when it is triggered. In Firefox, when an event is triggered, a parameter which contains information about the event is passed to event handling function.
(4)Does height/width of a box include margin/padding?
There are some great articles in this site http://www.quirksmode.org/ about compatibility of different browsers.
Posts
