Shulou(Shulou.com)06/02 Report--

This article is to share with you what is the difference between Firefox and IE CSS. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Whether you are familiar with the CSS difference between IE and Firefox, let's discuss it with you here.

CSS differences between IE and Firefox

1. The embedded div of IE6.0 's div can enlarge the height of the parent, but FireFox can't, so you have to set the height yourself.

2. When set to a three-column layout, the float width of IE6.0 cannot reach 100%, while FireFox can. When set to a two-column layout, both browsers work.

3. In Firefox, a non-float div is preceded by a div of the same parent float. If the div has a background image, you need to use clear:both to display the background image, while clear:both is not used in IE6.0.

4. Under the attribute of [text-decoration:underline], the underscore displayed by IE6.0 is a little lower than that of FireFox. In FireFox, some strokes are about 1 pixel below the underscore.

IEvs Firefox browser

Key points of CSS compatibility:

DOCTYPE affects CSS processing

Firefox browser: div is already in the middle when setting margin-left,margin-right to auto, but IE is not allowed

Firefox browser: when body sets text-align, div needs to set margin:auto (mainly margin-left,margin-right) to center.

Firefox browser: after setting padding, div will add height and width, but IE will not, so you need to use important to set up an extra height and width.

Firefox browser: yes! important,IE is ignored, available! important specially sets the style for Firefox

Vertical centering of div: vertical-align:middle; increases the line spacing to the same height as the entire DIV line-height:200px; and then inserts text, which is centered vertically. The disadvantage is to control the content and not to change the line.

Cursor:pointer can display the cursor finger shape in IEFirefox at the same time, hand only IE can

Firefox browser: link with a border and background color, you need to set display:block, and set float:left to ensure no line wrapping. With reference to menubar, the height of an and menubar is set to avoid misplacement of the bottom edge. If you do not set height, you can insert a space in menubar.

Small set of XHTML+CSS compatibility solutions

There are many advantages to using XHTML+CSS framework, but there are also some problems. Whether it is because of unskilled use or unclear thinking, I will first write down some of the problems I have encountered below to save everyone from looking around.

1. The inconsistent interpretation of the BOX model in mozillafirefox and IE leads to a phase difference 2px solution:

Div {marginal margin 30px important position 28px;} Note that the order of the two important must not be reversed, according to Ajie! the attribute IE does not recognize, but other browsers can. So under IE, it is actually interpreted as follows:

If you repeat the definition of div {maring:30px;margin:28px}, you can follow * one, so you can't just write "margin" XXpxwords.

Inconsistent BOX interpretations of 2.IE5 and IE6 the width of div {width:300px;margin:010px010px;} div under IE5 is interpreted as 300px-10px (right fill)-10px (left fill) the final div width is 280px, while on IE6 and other browsers the width is calculated as 300px+10px (right fill) + 10px (left fill) = 320px. At this point, we can make the following changes

Div {widthbank 300pximportantposition widthposition 340pxpositioned10px010px}.

The 3.ul tag has a padding value by default in Mozilla, while only margin has a value in IE, so define it first

Ul {margin:0;padding:0;} can solve most of the problems.

4. With regard to scripts, the language attribute is not supported in xhtml1.1, just change the code to

That's it.

The above is the CSS difference between Firefox and IE. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.