There are often many incompatibility issues between IE and FF in CSS web page layout. Here are some common possibilities and their solutions!
1. Use !important to solve the layout differences between IE and Mozilla !important is a syntax defined in CSS1. Its function is to increase the application priority of specified style rules. The most important point is that IE has never supported this syntax, but other browsers do. Therefore, we can use this to define different styles for IE and other browsers. For example, we define a style like this:
Example Source Code
[www.downcodes.com] .colortest{
border:20pxsolid#60A179!important;
border:20pxsolid#00F;
padding:30px;
width:300px;
}
When browsing in Mozilla, it can understand the priority of !important, so the color #60A179 is displayed; when browsing in IE, it cannot understand the priority of !important, so the color #00F is displayed.
2. Solve the problem that the hover style is not displayed after the hyperlink is accessed. Change the order of CSS properties: The order standard should be:
a:link—a:visited—a:hover—a:active
3. How to display the content in Li with ellipses after it exceeds the length Example Source Code
[www.downcodes.com] <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="#">CSS Web Design I love CSS-Web Standardization - www.52CSS.com</a></li>
<li><a href="#">Web standards FAQ - www.downcodes.com</a></li>
</ul>
margin:3px - means that all sides are 3px;
margin:3px 5px - means 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, the value of right and left is 5, and the value of bottom is 7
margin: 3px 5px 7px 5px - the four values represent top, right, bottom, left; top, right, bottom and left.
5. Solve the problem that IE cannot display transparent PNG correctly - add code in the header Example Source Code
[www.downcodes.com] <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>
Use (padding:0; margin:0; list-style:inside;)
Or (padding:0; margin:0; list-style:none;) to achieve compatibility
7. Solution to the 2px difference in the interpretation of the BOX model in Firefox and IE Example Source Code
[www.downcodes.com] div{
margin:30px!important;
margin:28px;
}
Note that the order of these two margins must not be reversed. According to the above mentioned IE does not support !important, so it is actually interpreted like this under IE:
Example Source Code
[www.downcodes.com] div{
maring:30px;
margin:28px
}
If there are repeated definitions, the last one will be executed, so you cannot just write margin:XXpx!important;
8. Default effect of margin The content in the div is centered by default in IE, and left-aligned in FF by default. The way to center the ff content is to add the code margin:auto;
