Div + CSS browser compatibility analysis

1. Use ! Important syntaxSolve the layout difference between IE and other browsers

! Important is the syntax defined by css1 to improve the application priority of a specified style rule. Currently, Internet Explorer does not support this syntax, whereas other browsers do. You can use this to define CSS styles between different browsers.

The style is as follows:

. Sidebar {border: 5px dotted # fc5! Important; Border: 5px dotted # 00f; padding-top: 20px; margin: 0 auto ;}

IE cannot be interpreted! Important syntaxSo the color of the border is # fc5; which can be fully explained! The important syntax browser displays the. Sidebar border coloring as # 00f.

2. hyperlink A: The hoverr style is not displayed after access

Change the order of CSS attributes. The standard order should be:
A: Link-> A: visited-> A: hover-> A: Active

3. How to display the content in Li with a ellipsis after the content length is exceeded

Li {width: 250px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden ;}
<Ul>
<Li> how to display the content in Li with ellipsis after the content exceeds the length </LI>
<Li> how to display the content in Li with ellipsis after the content exceeds the length </LI>
</Ul>

4. Define the abbreviation of margin and padding dimensions (trbl)

Margin: 3px; indicates that all edges are 3px;
Margin: 3px 5px; indicates that the top and bottom values are 3px, and the right and left values are 5px.
Margin: 3px 5px 7px; indicates that the top value is 3, the right and left values are 5, and the bottom value is 7.
Margin: 3px 5px 7px 5px; the four values are top, right, bottom, top, bottom, and left.

5. ie cannot display transparent PNG images correctly

Add in header:

<Script language = "JavaScript">
Function correctpng (){
For (VAR I = 0; I <document. Images. length; I ++ ){
VaR IMG = Document. Images [I]
VaR imgname = IMG. SRC. touppercase ()
If (imgname. substring (imgname. Length-3, imgname. Length) = "PNG "){
VaR imgid = (IMG. ID )? "Id = '" + IMG. ID + "'":""
VaR imgclass = (IMG. classname )? "Class = '" + IMG. classname + "'":""
VaR imgtitle = (IMG. Title )? "Title = '" + IMG. Title + "'": "Title = '" + IMG. Alt + "'"
VaR imgstyle = "display: inline-block;" + img.style.css text
If (IMG. align = "Left") imgstyle = "float: Left;" + imgstyle
If (IMG. align = "right") imgstyle = "float: right;" + imgstyle
If (IMG. parentelement. href) imgstyle = "cursor: hand;" + imgstyle
VaR strnewhtml = "<span" + imgid + imgclass + imgtitle + "style = \" "+" width: "+ IMG. width + "PX; Height:" + IMG. height + "PX;" + imgstyle + ";" + "filter: progid: DXImageTransform. microsoft. alphaimageloader "+" (src = \ '"+ IMG. SRC + "\ ', sizingmethod = 'Scale'); \"> </span>"
IMG. outerhtml = strnewhtml
I = I-1
}
}
}
Window. attachevent ("onLoad", correctpng );
</SCRIPT>

6. UL performs differently in Firefox and IE

Ul has a padding value in Firefox without a margin value. In IE, UL has a margin value and no padding value.
In Firefox, UL's list-style is at the outer edge of the content by default.
The CSS style can be written:
Padding: 0; margin: 0; List-style: inside;
Or
Padding: 0; margin: 0; List-style: none;

7. The box model has a 2px difference between Firefox and IE.

Div {margin: 30px! Important; margin: 28px ;}

Still using IE is not supported! The important syntax is used to write CSS styles. Note the order of margin, which is not supported by IE! Important, so the style after explanation in IE is Div {maring: 30px; margin: 28px}. When there are repeated values, the value should be based on the recent priority principle.

8. Default Effect of margin

Content in Div. IE is centered by default, and FF is left aligned by default. To center the content, define the CSS style as: div {margin: auto ;}