「论坛技术求助区-精华帖」DIV+CSS网页中IE和火狐兼容问题的合集
后盾网建校于2010年，一直专注于PHP全栈开发技术培训，并且专门为大家设置了【php与web技术求助专区】，如果你在学习中，遇到相关方面的技术难题，可以在<后盾网论坛>发帖子哦，后盾网的技术讲师会亲自为你解答的！
在这里，不但有后盾老师的解答，还有不少热心的盾友技术分享贴，技术精华哦。看，下面这就是一位@waglittle热心的网友给大家的技术分享！
如题：做了不少网站，遇到很多兼容性问题，也解决了不少，但是每次都不注意整理，导致遇到同样的问题，还要找半天的解决办法。这样做太浪费时间了，现欲借助后盾网这个平台，进行整理！以便方便大家和自己，少走一些弯路。
希望大家踊跃跟帖，让可恶的兼容性问题，在后盾消失掉！
1、用!important解决IE和Mozilla的布局差别
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权，最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：
.colortest{ border:20px solid #60A179!important; border:20px solid #00F; padding:30px; width:300px;}
在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色；在IE中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色。
2、解决超链接访问过后hover样式不显示的问题
改变CSS属性的排列顺序: 先后顺序标准应为：a:link—a:visited—a:hover—a:active
3、Li中内容超过长度后以省略号显示的方法
<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标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
</ul>
4、margin和padding定义尺寸的缩写
margin:3px——表示所有边都是3px；
margin:3px 5px—— 表示top和bottom的值是3px ,right和left的值是5px
margin:3px 5px 7px——表示top的值是3，right和left的值是5，bottom的值是7
margin:3px 5px 7px 5px——四个值依次表示top,right,bottom,left；上右下左。
5、解决IE不能正确显示透明PNG——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.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在Firefox和IE下表现不同
使用（padding:0; margin:0; list-style:inside;）或者（padding:0; margin:0; list-style:none;）实现兼容
7、BOX模型在firefox和IE中的解释相差2px的解决方法
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反。根据上面提到的IE并不支持!important，所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
8、margin的默认效果
div里的内容，ie默认为居中，而ff默认为左对齐。使ff内容居中的方法是增加代码margin:auto;
/*Add on 2012-05-19*/
9、ie6和ie7或FF下z-index无法正常调用（隐藏菜单栏中用的比较多）
可能不少人知道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时 候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。
有一定经验的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上 的小小偏差。
例：
条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层 级。例如下面的HTML代码：
<div id="blank"></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
复制代码
可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可 怜的IE6童鞋——
再看看以Firefox为代表的其他童鞋：
E7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此 强势的孩子没有出头之日啊！
知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代码如下：
<div id="blank"></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>
复制代码
结果IE6童鞋喜笑颜开，春光灿烂：
/*Add on 2012-05-21*/
10.列表，错位问题，没什么好说的！看图就能明白，可还是让我想了半天，非常坑爹！
FF下错位，IE下正常：
在群里问了个朋友，图是这样的：
记过自己看了下样式，行高设置高了，所以错位了.
解决前：#newslist li {line-height:30px;}
解决后：#newslist li {line-height:24px;}
/*Add on 2012-07-23*/
11.IE6下margin属性，宽度、高度为火狐下的双倍！
当你工作一天，网页终于做好了。可是突然发现，火狐下正常，IE6下很多东西的宽度都是你所设置的数值的双倍。请不要着急。
例子：
<code>.logo{ width:187px; height:59px;float:left;margin-top:40px; margin-left:55px;}</code>
出现这种情况是因为，在margin属性里同时设置了数值，以及float的属性。
解决办法为：在其后面添加display:inline;就可以解决这个问题,更改后如下：
<code>.logo{ width:187px; height:59px;float:left;margin-top:40px; margin-left:55px;display:inline;}</code>
