Firfox 与IE 处理 DIV+CSS 常见兼容问题
1.DOCTYPE 影响 C
1.DOCTYPE 影响 CSS 处理 -right 为 auto 时已经居中,
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, IE 不行 3.FF: body
故需要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px;SS 处理 2.FF: div 设置
然后插入 文字，就垂直居中了缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
SS 处理 2.FF: div 设置
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反.
margin-left, margin
10.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;} 就能解决大部分问题
11,FF中链接样式有差异,按以下顺序进行定义即可解决:
IE 不行 3.FF: body
a:link—a:visited—a:hover—a:active
注意事项：
IE 不行 3.FF: body
1、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。解决方案是在这个div里面加上display:inline;
SS 处理 2.FF: div 设置
2、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
----------------------------------
DIV+CSS浏览器兼容性分析 收藏
1、用!important语法解决IE和其它浏览器之间的布局差别
!important是CSS1定义的语法，作用是提高指定样式规则的应用优先权。目前IE一不支持这个语法，而其他的浏览器则都支持。可以利用这一点来定义不同浏览器间
的CSS样式。
如下样式：
.sidebar{ border:5px dotted #FC5 !important ; border:5px dotted #00F; padding-top:20px; margin:0 auto;}
IE中浏览时候由于它不能够解释!important语法，因此边框显示的颜色为#FC5；能完全解释出!important语法的浏览器则把.sidebar边框的着色显示为#00F。
2、访问过后超链接a:hoverr的样式不显示
改变CSS属性的排列顺序，先后顺序标准应为：
a:link -> a:visited -> a:hover -> a:active
3、Li中内容超过长度后以省略号显示的方法
li { 250px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;}
<ul>
<li>Li中内容超过长度后以省略号显示的方法</li>
<li>Li中内容超过长度后以省略号显示的方法</li>
</ul>
4、定义margin和padding尺寸的缩写（TRBL）
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=\"" + "" + 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下表现不同
ul在Firefox下有padding值，没有margin值。IE下则相反，ul有margin值，没有padding值
在Firefox下，ul的list-style默认是处于内容的外边缘的。
构建网站时CSS样式可写为：
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;}
仍是利用IE不支持 !important 这个语法而来写CSS样式。注意margin的顺序，IE并不支持!important，故在IE下解释后的样式是div{maring:30px;margin:28px}，
当有重复定义值时按照最近优先的原则来取值。
8、margin的默认效果
div中的内容，ie默认为居中，而ff默认为左对齐。使内容居中的方法是将CSS样式定义为：div{margin:auto;}