Collation of IE and Firefox compatibility issues on Div + CSS web pages

 

Browser incompatibility issues often occur when building websites using Div + CSS. The following describes some common incompatibility problems and solutions!

1. Use it! Important solves the layout difference between IE and Mozilla

! Important is a syntax defined in css1. It improves the application priority of a specified style rule. The most important thing is that IE never supports this syntax, but other browsers support it. Therefore, we can use this to define different styles for IE and other browsers. For example, we define a style like this:

. Colortest {border: 20 pxsolid #60a179! Important; Border: 20 pxsolid # 00f; padding: 30px; width: 300px ;}

It can be understood when browsing in Mozilla! Indicates the priority of important. Therefore, the color #60a179 is displayed. It cannot be understood when browsing in IE! Important priority, so the color of # 00f is displayed.

2. solved the problem that the hover style is not displayed after hyperlink access.

Change the order of CSS attributes. The standard sequence is 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

<Meta content = "text/html; charset = gb2312" http-equiv = "Content-Type"/> <style type = "text/CSS">
<! --
Li {
Width: 200px;
White-space: nowrap;
Text-overflow: ellipsis;
-O-text-overflow: ellipsis;
Overflow: hidden ;}
--> </Style>
<Ul>
<Li> <a href = "#"> Web Standard FAQ </a> </LI>
<Li> <a href = "#"> Web Standard FAQ </a> </LI>
</Ul>

4. Abbreviation of margin and padding sizes

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 -- four values in turn indicate top, right, bottom, left; top, bottom, and left.

5. Solve the problem that IE cannot correctly display transparent PNG -- add code in Header

Program code <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
Use (padding: 0; margin: 0; List-style: Inside;) or (padding: 0; margin: 0; List-style: none;) for compatibility. refer: http://and8.net/article.asp? Id = 273

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

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

Note that the order of the two margin cannot be reversed. According to the IE mentioned above, it is not supported! Important, so in IE, it is actually explained as follows:

Div {maring: 30px; margin: 28px}

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

8. Default Effect of margin
In Div, ie is centered by default, and FF is left aligned by default. To center FF content, add the code margin: auto;