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
3 comments:
Any solution to this issue? I've just started writing html/css and ran into exactly the same problem pretty quickly. Most people talk about non-standard behavior in IE, but in this case it seems to me that firefox is the one that isn't behaving the way you would expect.
I should have been clearer - "this issue" I mentioned was intended to refer to your point (1).
However, after further investigation, I think I can answer my own question:
Either float the second inner div as well, or clear:left it to avoid overlapping and move it to below the first inner div. AFAIK IE will behave the same in these cases. It is only when a non-floated block box follows a floated block that the overlapping behavior occurs in FF (correctly I guess) but not in IE.
yes, you are right.
If you don't specify the float property of the second inner div, behaviors of different browsers differ. Web application development is a real pain because of compatibility. You can make use of some good javascript/Ajax frameworks to ease your web development. There are couple of frameworks: prototyp/scriptaculous, dojo, Ext, qooxdoo, mootools ... However, based on my experience, these frameworks are far from perfect.
I hope that helps.
Post a Comment