CSS浏览器兼容

五大浏览器内核代表作品
*Trident:IE、Maxthon(遨游)、Theworld世界之窗、360浏览器
*Gecko:代表作品Mozilla Firefox是开源的,它的最大优势是跨平台,能在Microsoft Windows、Linux 和MacOS X等主要操作系统上运行。
*Webkit:代表作品Safari、Chrome,是一个开源项目。
*Presto:代表作品Opera,Presto是由Opera Software开发的浏览器排版引擎。它是世界上工人的渲染速度最快的引擎。
*Blink:由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。

为什么会出现浏览器兼容问题?
由于各大主流浏览器由不同的厂家开发,所有的核心框架和代码也很难重和,这就为各种莫名其妙的的Bug(代码错误)提供了温床。再加上各大厂商处于自身利益考虑而设计的种种技术壁垒,都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去客服的。

CSS Bug、CSS Hack和Filter
CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS Bug。
CSS Hack:CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。

IE6常见CSS解析Bug及Hack

1、图片间隙

div中的图片间隙(该bug出现在IE6及更低版本中)
描述:在div中插入图片时,图片会将div下方撑大三像素。
hack1:将</div>与<img>写在一行上;(已失效!)
hack2:将<img>转换为块元素,给<img>添加声明:display:block;

2、双倍浮动(双倍边距)

描述:当IE6及更低版本浏览器在解析浮动元素时,会错误地把浮动边界加倍显示。
hack:给浮动元素添加声明:display:inline;

3、默认高度(IE6)

描述:在IE6及以下版本中,部分元素拥有默认高度(低于18px高度)
hack1:给元素添加声明:font-size:0;
hack2:给元素添加声明:overflow:hidden;

4、表单元素行高不一致(IE,MOZ,C,O,S)

描述:表单元素行高对齐方式不一致
hack:给表单元素添加声明:float:left;

5、按钮元素默认大小不一致

描述:各浏览器中按钮元素大小不一致
hack1:统一大小/(用a标记模拟)
hack2:在input上写按钮的样式,一定要把input的边框去掉。
hack3:如果这个按钮是一个图片,直接把图片作为按钮的背景图即可。

6、百分比bug

描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。
hack:给右面的浮动元素加上声明:clear:right;

7、鼠标指针bug

描述:cursor属性的hand属性值只有IE浏览器识别,其他浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;

8、透明属性

IE浏览器写法:filter:alpha(opacity=value);取值范围1-100
兼容其他浏览器写法:opacity:value;(value的取值范围0-1,0.1,0.2,0.3---0.9)

过滤器(filter)

1、下划线属性过滤器

当在一个属性前面添加了一个下划线后,由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明,但是在IE6及更低版本浏览器中会继续解析这个规则。
语法:选择器{_属性:属性值;}

2、!important关键字过滤器

它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它,我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。
语法:选择器{属性:属性值!important;}

3、属性过滤器

当在一个属性前面增加了后,该属性只能被IE7浏览器识别,其它浏览器忽略该属性的作用。
语法:选择器{
属性:属性值;}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容

  • CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与F...
    单纯的土豆阅读 5,785评论 1 33
  • 1.什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozi...
    饥人谷_bigJiao阅读 622评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1 92
  • 记录工作学习中发现的CSS浏览器兼容问题以及可行的解决方法,为日后的工作提供便利。PS:待完善中... 1.针对I...
    Johnson杰阅读 219评论 0 1
  • 什么是 CSS hack CSS hack指浏览器各版本之间对CSS解析后展现的效果不一样,针对不同的浏览器去写不...
    柏龙阅读 297评论 0 3