浅谈CSS hack(浏览器兼容)

今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写!

先看一个图

这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu.com/data/browser)。令我感到欣慰的是chrome排第一,chrome一直以来对W3C标准都支持得比较友好,但是图中也反映了使用IE系列的人数也不少,所以我们日常做前端开发的时候还要考虑他们的感受。

以下是正文:

  我的前任公司做前端的时候,要求兼容IE8及以上,谷歌,火狐三座大山。因为是用的表格布局(有一定历史了~),所以日常开发以及维护的时候一般也没什么太大的兼容问题要处理。现在谷歌和火狐对W3C标准支持得比较好,特别是最新的版本。现在火狐最新版本是49.0.1.6109,chrome最新版本53.0.2785.116 。写过几个HTML5+CSS3的小页面(3D魔方动画、简笔画+动画),支持的都很好。某些CSS3属性不支持直接加前缀 -webkit- 、 -moz- 、-o-、-ms- 即可解决。

一句话总结: 各大浏览器最新版几乎都支持W3C标准,但日常开发用到CSS3属性的时候建议加上前缀,以向前兼容老版本的浏览器。

栗子:

transform-style: preserve-3d;        /*W3C标准*/

-webkit-transform-style: preserve-3d;   /*chrome safari*/

-moz-transform-style: preserve-3d;      /*firefox*/

-0-transform-style: preserve-3d;          /*opera*/

说完简单的来说点不是很复杂的。

IE系列中,IE9及以上对HTML5支持都不错了。但是IE678还是有很大的问题,主要就是不支持HTML5的新标签。

(HTML5加了什么新标签?新标签有什么作用?请看https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document)

这个问题我认为比较好的解决方案就是html5shiv.js(什么?你说还有更好的解决方案?请不吝告知,万分感谢)

这个文件有兴趣的可以看看,主要是创建了html5的新标签(栗 article nav等),然后将这些标签设为块级元素。

对于小白来说,使用非常简单,在页面的head中添加下面的代码

<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->

当浏览器是IE且版本小于IE9的时候,就使用这个js文件,解决不兼容html5的问题。

但是在开发过程中,解决这些往往不够,特别是IE 6 7 还有一些内容是会产生不兼容。

栗子:

我们平时写导航栏的时候,可能会用到display: inline-block;但是用完以后发现IE6 7 不支持inline-block这个属性。

那我只好在代码中添加+display: inline; 然后再用+zoom:1做缩放。

虽然和inline-block还是有点不一致的地方,但是整体来说还是可以的。

这个前缀+只能被IE 67识别,其他版本浏览器都不会识别这句CSS代码。

display: inline-block;
+display: inline; /*for IE6、7*/

还有其他前缀,例如 IE6专属前缀“-”   -display:inline;

前缀"*"  *display:inline; /*IE6 7*/

除了添加前缀,还可以用条件注释hack

栗子:

<!--[if IE 6]> 仅IE6可识别  您的代码
<![endif]-->

<!--[if lt IE 9]> IE9以下版本可识别  您的代码
<![endif]-->

IE6还有特别多的BUG,比如著名的3px等,IE67是挺麻烦的,但是现在(2016.9.28)很多公司都不再要求完全兼容IE6 7,所以这里也不详细说,有前缀hack和条件注释hack我认为就够用了。大家有兴趣可以下载IEtest或者在IE11中调出兼容模式,用IE各种版本看看一些页面内容丰富的大网站有什么区别。

说完IE 6 7 最后再啰嗦啰嗦IE 8

IE8一般情况下是没什么兼容问题,但是IE8没有专属的前缀hack,如果出现问题我会用前缀hack来筛选,

(你说条件注释hack可以吗?当然可以)

看看栗子

栗子:

.div{   width: 100px;    height: 100px;    background:green\0;     /* IE 8 9 10专属*/
    background:red\0\9;     /*IE 9 10专属*/
    background:red;           /*W3C标准*/
}

这个栗子里用前缀hack选择, 除了IE8中DIV显示背景颜色是绿色,IE9 10和其他浏览器都是红色。

如果您还有更好更便捷的方法,请不吝告知,万分感谢。

IE9及以上几乎都没有太大的问题。这里就不啰嗦了。以后工作中发现了再来补充。

最后总结,日常开发中很少会用到IE hack,写这篇博客也是为以后以防不测~

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知 ending~

时间: 2025-01-06 10:47:26

浅谈CSS hack(浏览器兼容)的相关文章

浅谈Web前端浏览器兼容问题

对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第

转:浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,

浅谈CSS盒子模型

[摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于整个HTML文档的布局也会产生很大的帮助和促进.本文尝试在介绍CSS盒子模型基本概念和组成元素属性的基础上,结合个人学习经验对其在网页制作中的实际应用谈一谈自己浅显的观点和看法.[关键词]盒子模型:表现效果:网页布局: CSS是Cascading Style Sheets的缩写,中文意思是层叠样式表

【转】浅谈 CSS 清除浮动的 6 种方法

转载:浅谈 CSS 清除浮动的 6 种方法 在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题 引出问题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black;

浅谈CSS优先级机制(一)

初次写随笔,如果有哪个地方不足还望大神指点改正,下面我来谈谈我对于CSS优先级的了解吧. CSS优先级,通俗的理解就是你给元素等一堆属性描述,然后最后到底是哪个描述作为最终显示的效果的规则或机制(个人理解).以下我将分为几个点来谈谈优先级的确定. 1.引入方式: CSS引入的方式,我目前只知道四种:内联式.内嵌式.导入式.链接式(当然网上的说法名称不一,理解就好). 各种引入方式的用法我在这里就不再多说了.以上我所按顺序罗列的四个方式是理论上的优先级顺序,也就是说,我使用内联式引入的css代码作

css hack IE兼容调试小结(Webstorm、VS2010),有图有真相,研究了一中午

练习了些CSS代码,发现IE各种不兼容,打算用css hack调试IE 6 7 8.网上搜了些方法,虽然可行,但webstorm和VS2010各种提示报错让人不爽,试了几个小时,最终结论如下: 1.只有IE6 7认那些乱七八槽的符号,可随便用一个(% ^ &之类都行),但大家习惯用*或+,如*.background,这样只有IE6 7才认.但是webstorm会把语法检查把上下行一起标错,看起来不爽,VS干脆就报错不让ctrl E D格式化. 2.!important虽然可用,但要注意顺序,且这

CSS在浏览器兼容问题上的处理方法

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题  vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

CSS hack样式兼容模式收藏

part1 —— 浏览器测试仪器,测试您现在使用的浏览器类型 IE6   IE7   IE8   Firefox   Opera   Safari (Chrome)   IE6   IE7   IE8   Firefox   Opera   Safari (Chrome)   您现在使用的浏览器是Opera.Opera游览器很时髦么. 您现在使用的浏览器是Firefox.Firefox是很强大的游览器. 您现在使用的浏览器是Safari(Chrome).Safari和Chrome使用的都是Web

浅谈css position属性

今天来谈一下css的position属性,刚学的时候对定位还是有点不太了解,看了很多视频和文档,但是还是没有真正的了解,要做到真正的了解,还是需要多去实现. 简单的来说,position就5个属性,在网页布局中中会经常使用到,怎么单个用,怎么搭配起来用,能够用的好的人我相信并不多. 那它一共就static | relative | absolute | static | fixed | inherit五大熟悉,但是后面的3个属性就用的比较少,现在来讲讲他们的特点. 我显示分别测试了将一个盒子先后