IE and FF incompatible page layouts CSS issues

CSS page layout will often appear a lot of IE and ff incompatibility problem, the following collation of some common possibilities and solutions!

1, with!important solution ie and Mozilla layout difference

!important is the syntax defined by CSS1 to increase the application priority of the specified style rule, most importantly: IE has not supported this syntax, and other browsers support it. So we can use this to give IE and other browsers different style definitions, 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 the #60a179 is displayed and the!important priority is not understood in IE, so the color of the #00f is displayed.

2, solve the problem that hover style does not display after hyperlink access

To change the order of CSS attributes: The order criteria should be:
A:link-a:visited-a:hover-a:active

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

<meta content= "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= "#" >css Web Design I love css-web standardization-www.52css.com</a></li>


<li><a href= "#" >web Standard FAQ-www.52css.com</a></li>


</ul>

4, margin and padding defined size abbreviations

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

5, the solution of IE can not correctly display transparent Png--header add 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 under different performance

Use (padding:0; margin:0; List-style:inside;
or (padding:0; margin:0; List-style:none) Implementation compatible

7, box model in Firefox and IE explain the difference between 2px solution

div{


margin:30px!important;


margin:28px;


}  

Note that these two margin must not be written in reverse order. According to the above mentioned IE does not support!important, so in IE in fact, explained that:

div{


maring:30px;


margin:28px


}  

Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important;

8, margin default effect

div content, ie defaults to center, and FF defaults to left-aligned. The way to center FF content is to add code Margin:auto;