浏览器常见兼容性问题汇总

1、随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大,解决方案是:*{margin:0;padding:0;}

2、块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大,常出现的问题是IE6中后面的一块被顶到下一行,解决方案是:在float的标签样式控制中加入 display:inline;将其转化为行内属性

3、设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度,这是因为这些浏览器下有默认行高,解决方案是:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

4、几个img标签放在一起的时候,有些浏览器会有默认的间距,加了 *{margin:0;padding:0;} 也不起作用,这是因为多个image标签进行了换行,解决方案是:使用float属性为img布局

5、一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度。解决方案是:a、 在子标签最后清浮动{<div style="height:0;clear:both;">&nbsp;</div>} b 父标签添加{overflow:hidden;} c 给父标签设置高度。对于方法a,我们在html结构中添加了额外的div标签,不利于后期阅读和维护,现在我们采用after属性来设置清除浮动,比如这里提到的父标签为<div id="container"></div>,只需要设置CSS样式#container:after{content:‘.‘;display: block;clear: both;height: 0;overflow:hidden;visibility: hidden;},这样就清楚了浮动,又没有增加额外的标签。

6、Ie6下,不识别最大宽、高度和最小宽高度,意即min-width/height和 Max-width/height在ie6中没效果

解决方法:(1):.abc{border:1px blue solid;width:200px;height:200px;}

html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}

(2):.abc{width:200px;height:200px;_width:200px;_height:200px;}(因为ie6有一个特征,当定义一个高度时,如果内容超过高度,元素会自动调整高度。)

7、Ie6里面:如li设宽、高,并且li里面的标签浮动,那么li之间会有间距,解决方案是:li不设宽、高或者li内的标签不浮动

8、3像素问题:ie6下,当浮动元素与流动元素并列显示时,他们之间会存在三像素问题,解决方案是:让流动元素(即非浮动元素)也设置float:left就可以了

9、opacity 定义元素的不透明度,  解决方案是:filter:alpha(opacity=80);/*ie支持该属性*/     opacity:0.8;/*支持css3的浏览器*/

10、两个块元素,竖向的margin值不增加,会重叠,其间距为最大margin值。

11、优先级:被!important 注明的css属性具有最高优先级(.abc{color:red !important;})。但在ie6中!important具有一个bug:在同一组css属性中,!important不起作用。

12、火狐不识别background-position-y 或background-position-x;

13、IE6不支持fixed

1 #top{
2     position:fixed;
3     _position:absolute;
4     top:0;
5     right:20px;
6     _bottom:auto;
7     _top:expression(eval(document.documentElement.scrollTop));
8 }  

14、解决 ie6 最大、最小宽高 hack方法

 1 /* 最小宽度 */
 2 .min_width{
 3     min-width:300px;
 4     _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
 5 }
 6
 7 /* 最大宽度 */
 8 .max_width{
 9    max-width:600px;
10    _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
11 }
12
13 /* 最小高度 */
14 .min_height{
15    min-height:200px;
16    _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
17 }
18
19 /* 最大高度 */
20 .max_height{
21    max-height:400px;
22    _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
23 }

15、z-index不起作用的 bug

ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有两个:1、父标签position属性为relative;2、问题标签含有浮动(float)属性。在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。

16、IE各版本Hack

 1 /*类内部hack:*/
 2     .header {_width:100px;}            /* IE6专用*/    //最好把IE6 hack写在最后一行
 3     .header {*+width:100px;}        /* IE7专用*/
 4     .header {*width:100px;}            /* IE6、IE7共用*/
 5     .header {width:100px\0;}        /* IE8、IE9共用*/
 6     .header {width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
 7     .header {width:330px\9\0;}    /* IE9专用*/
 8
 9 /*选择器Hack:*/
10     *html .header{}        /*IE6*/
11     *+html .header{}    /*IE7*/ 

17、IE6下hover只支持a标签,解决方案是可以合理嵌套a标签或是给标签用javascript添加模拟hover效果

18、IE6中png格式图片不支持透明,解决方案是使用javascript进行处理;或者使用gif、jpg图像替代掉png图片的使用。

19、input聚焦框颜色与样式各浏览器不同,解决方法是使用:outline:none,清除默认样式后再统一设置。

20、鼠标移上小手效果,IE6为cursor:hand  CSS标准:cursor:pointer  所以解决方案是这两种一起设置: cursor:hand;cursor:pointer

21、CSS优先级!important在IE6 同一组CSS属性中,!important不起作用,解决方法是单独设置

时间: 2024-10-29 19:07:41

浏览器常见兼容性问题汇总的相关文章

IE6 浏览器常见兼容问题 大汇总(23个)

IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作. 在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享. 如需转载,请注明出处:网易博客-独行冰海:IE6 浏览器常见兼容问题 大汇总 1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的

浏览器兼容性问题汇总

# 浏览器兼容性问题汇总 ## 问题1 ### first-child ## <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div p:first-child { color: red; } </style> </head> <

IE6以及各个浏览器常见兼容问题 大汇总

综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作.在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享. 如需转载,请注明出处:网易博客-独行冰海:IE6 浏览器常见兼容问题 大汇总1.<!DOCTYPE HTML>文档类型的声明.产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象:解决办法

IE6以及各个浏览器常见兼容问题 大汇总 【转】

IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作. 在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享. 网易博客-独行冰海:IE6 浏览器常见兼容问题 大汇总 1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览

IE6 浏览器常见兼容问题 大汇总(23个)[转载]

IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作. 在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享. 1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏

【转】浏览器兼容性问题汇总

浏览器兼容性问题汇总 1:margin-left在IE6不生效(复现条件:块状元素.浮动.margin-left) ---------解决方法:http://www.seostudying.com/1233.html 2: position:fixed 在ie6 .ie7(quirk) . ie8(quirk)下被当成错误处理.-----------解决方法:http://blog.sina.com.cn/s/blog_106f3d140100yaok.html 解决思路:用 _position

CSS对浏览器的兼容性常见处理方式小结

CSS技巧 1.div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了. 缺点:要控制内容不要换行. 2. margin加倍的问题:设置为float的div在ie下设置的margin会加倍. 这是一个ie6都存在的bug. 解决方案:在这个div里面加上display:inline; 例如:<#div id=”imfloat”>相应的css为 #IamFloat{ float:lef

【转载】IE浏览器常见的9个css Bug以及解决办法

IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已,有时候需要通过专为IE6或者IE8设计单独的定义.IE浏览器则因此被公认为Web程序员的毒药,虽然在微软官网上并没有提供相关的解决方案,但是IE浏览器的兼容性存在的问题却是Web程序员必须熟练掌握的.本文总结了9个IE浏览器上最常见

IE下常见兼容性问题总结

概述 本小菜平时主要写后台程序,偶尔也会去写点前端页面,写html.css.js的时候,会同时开着ie6.ie7.ie8.ie9.chrome.firefox等浏览器进行页面测试,和大部分前端开发一样,经常被ie折磨,下面就总结一些常见的浏览器兼容性问题,放一起方便自己总结学习,我知道这类型文章,很多大牛都总结过,且写的特别专业.不过我写的都是自己最近碰到的,本人技术一般,也希望各位多加指点. 一.IE6/IE7对display:inline-block的支持欠缺 1)表现描述 这个应该算是很经