1、ie6 ie7 火狐常见兼容问题Firfox 与 IE 处理 DIV+CSS 常见兼容问题(2008-01-25 10:32:25)标签：杂谈 分类：css 1.DOCTYPE 影响 C1.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 会
2、增加 height 和 width, 但 IE 不会, IE 不行 3.FF: body 故需要用 !important 多设一个 height 和 width5.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
3、 可以8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。SS 处理 2.FF: div 设置9.在 mozilla firefox和 IE中的 BOX模型解释不一致导致相差2px解决方法：divmargin:30px!important;margin:28px;注意这两个 margin的顺序一定不能写反.margin-left, margin10.ul 标签在 Mozilla中默认是有 padding值的,而在 IE中只有 margin有值所以先定义ulmargin:0;padding:0; 就能解决大部分问题11,FF 中链
4、接样式有差异,按以下顺序进行定义即可解决:IE 不行 3.FF: body a:linka:visiteda:hovera:active注意事项：IE 不行 3.FF: body 1、margin 加倍的问题。设置为 float的 div在 ie下设置的 margin会加倍。解决方案是在这个 div里面加上 display:inline;SS 处理 2.FF: div 设置2、关于高度的问题如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。-DIV+CSS浏览器兼容性分析 收藏1、用!important 语法解决 IE和其它浏览器之间的布局差别!i
5、mportant 是 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:ho
6、verr的样式不显示改变 CSS属性的排列顺序，先后顺序标准应为：a:link - a:visited - a:hover - a:active3、Li 中内容超过长度后以省略号显示的方法li width:250px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;Li 中内容超过长度后以省略号显示的方法Li 中内容超过长度后以省略号显示的方法4、定义 margin和 padding尺寸的缩写（TRBL）margin:3px; 表示所有边都是 3px；margin:3px 5px; 表示 top和 bottom的值是
7、3px ,right和left的值是 5pxmargin:3px 5px 7px; 表示 top的值是 3，right 和 left的值是 5，bottom 的值是 7margin:3px 5px 7px 5px; 四个值依次表示top,right,bottom,left上右下左。5、IE 不能正确显示透明 PNG图片header 内加入：程序代码function correctPNG()for(var i=0; i“img.outerHTML = strNewHTMLi = i-1window.attachEvent(“onload“, correctPNG);6、ul 在 Firefox和
8、 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的解决方法divmargin:30px !important ; margin:28px;仍是利用 IE不支持 !important 这个语法而来写 CSS样式。注意 margin的顺序，IE 并不支持!important，故在 IE下解释后的样式是 divmaring:30px;margin:28px，当有重复定义值时按照最近优先的原则来取值。8、margin 的默认效果div 中的内容，ie 默认为居中，而 ff默认为左对齐。使内容居中的方法是将 CSS样式定义为：divmargin:auto;
