Difference between CSS style ff and IE

Firefox: When div is set to margin-left and margin-right is set to auto, it is already centered. IE is not working.

When setting text-align for Firefox: body, you must set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

Firefox: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

Firefox: supported! Important, ie is ignored, available! Important sets a special style for Firefox

Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.

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

Firefox: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.

Small set of XHTML + CSS compatibility Solutions
There are many advantages to using the XHTML + CSS architecture, but there are also some problems. Whether it is because I am not skilled or have unclear ideas, I will first write some of the problems I encountered below:

1. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:

Div {margin: 30px! Important; margin: 28px;} note that the order of the two margin cannot be reversed! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:

If Div {maring: 30px; margin: 28px} is repeatedly defined, it is executed according to the last one. Therefore, you cannot write only margin: xxpx! Important;

2. the box interpretations of ie5 and IE6 are inconsistent. Div {width: 300px; margin: 0 10px 0 10px;} Div width is interpreted as 300px-10px (right filling) -10px (left filled) the final Div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, you can make the following changes:

Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}

3. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first.

Ul {margin: 0; padding: 0;} solves most problems.

4. For the script, the language attribute is not supported in xhtml1.1.CodeChange

<SCRIPT type = "text/JavaScript">

 

*: Lang (zh) Select {Font: 12px! Important;}/* FF dedicated */
Select: Empty {Font: 12px! Important;}/* safari visible */
Here, select is the selector, which can be changed as needed. The second sentence is unique to the Safari browser on Mac.

Only IE7 Recognition

* + HTML {...}
This hack can be used only for IE7.

Identification of IE6 and IE6 or lower

* HTML {...}
Note that many landlords have written the hack of IE6. In fact, ie5.x can also identify this hack. Not recognized by other browsers.
Html/**/> body select {......}
This sentence serves the same purpose as the previous one.

Only IE6 is not recognized

Select {display/* IE6 not recognized */: none ;}
Here we mainly use CSS annotations to separate an attribute and a value, and the stream is prior to the colon.

Only IE6 and ie5 are not recognized

Select/**/{display/* IE6, ie5 does not recognize */: none ;}
The difference here is that a CSS comment is added between the separator and curly braces.

Only ie5 is not recognized

Select/* ie5 not recognized */{display: none ;}
This sentence removes the comment of the attribute area from the previous sentence. Only ie5 is not recognized

Box Model Solution

Selct {width: ie5.x width; voice-family: "\" }\ ""; voice-family: Inherit; width: correct width ;}
The box model clearing method is not passed! Important. This should be clear.

Clear floating

Select: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}
In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, the floating hack can be used to define the parent level.

Ellipsis (...)

Select {-o-text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}
This is a good technique to cut out more text and end it with a ellipsis. But Firefox does not currently support it.

Only opera Recognition

@ Media all and (min-width: 0px) {select {......} }
Set the Opera Browser separately.

The above are some hack in CSS, which are used to solve the local compatibility problem. If you want to separate the compatibility content, try several filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import the required patch styles through conditions.

Ie5.x filter, only visible to ie5.x

If condition hack of IE

<! -- [If IE]> only ie <! [Endif] -->
All ie identifiable
<! -- [If IE 5.0]> only IE 5.0 <! [Endif] -->
Only ie5.0 can recognize
<! -- [If gt ie 5.0]> only IE 5.0 + <! [Endif] -->
Both ie5.0 and ie5.5 can be identified.
<! -- [If lt IE 6]> only IE 6-<! [Endif] -->
Only IE6 can recognize
<! -- [If gte ie 6]> only IE 6/+ <! [Endif] -->
Ie5.x under IE6 and IE6 can be recognized
<! -- [If lte ie 7]> only IE 7/-<! [Endif] -->
Only IE7 can recognize

The above content may not be comprehensive. You are welcome to join me in summarizing these skills to facilitate future work queries. I would also like to thank the authors who have developed these hack.

@ Media tty {
I {content: "\";/* "*/}}@ import 'ie5win.css '';/*";}
}/**/
Ie5/MAC filters are generally not required

[Copy to clipboard] [-] Code:
/*\*//*/
@ Import "ie5mac.css ";
/**/