Div+css Web site often appear browser incompatibility problems, the following collation of some common incompatibility problems, and solutions!

1, using!important to solve the layout differences between IE and Mozilla

!important is the syntax defined by CSS1, the role is to improve the application of the specified style rules priority, the most important point is: IE has not supported this syntax, and other browsers are supported. So we can use this to separate the style definitions for IE and other browsers, for example, we define a style like this:

. colortest{border:20pxsolid#60a179!important; border:20pxsolid#00f; padding:30px; width:300px;}

When browsing in Mozilla, it is possible to understand the priority of!important, so the color of #60a179 is displayed, and when browsing in IE, it is not possible to understand the!important priority, so #00f color is displayed.

2. Solve the problem that hover style does not appear after hyperlink access

Change the order of CSS properties: The order standard should be: a:link-a:visited-a:hover-a:active

3, Li in the content beyond the length of the ellipsis display method

<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 Daquan Web Standard FAQ </a></li>
<li><a href= "#" >web Standard FAQ Daquan Web Standard FAQ </a></li>
</ul>

4, margin and padding definition of the size of the abbreviation

margin:3px--means that all sides are 3px;
Margin:3px 5px--indicates that the value of top and bottom is 3px, and the value of right and left is 5px
MARGIN:3PX 5px 7px--indicates that the value of top is 3,right and left value is 5,bottom value is 7
margin:3px 5px 7px 5px--Four values in turn indicate top,right,bottom,left, upper right bottom left.

5, to solve the IE can not display the correct transparent Png--header add code

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.cssText
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 in Firefox and IE performance of different
Use (padding:0; margin:0; List-style:inside;) or (padding:0; margin:0; List-style:none;) Implementation compatible, reference address: http://and8.net/article.asp?id=273

7, box model in Firefox and IE in the interpretation of the difference 2px solution

div{margin:30px!important;margin:28px;}

Note that the order of the two margin must not be written in reverse. According to the above mentioned IE does not support!important, so under IE is actually interpreted as such:

DIV{MARING:30PX;MARGIN:28PX}

Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

8, the default effect of margin
Div, ie is centered by default, and FF is left-aligned by default. The way to center the FF content is to add code Margin:auto;