浅谈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~
浅谈CSS hack(浏览器兼容)的更多相关文章
- 浅谈Web前端浏览器兼容问题
对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...
- CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- 【ASP.NET MVC系列】浅谈Google Chrome浏览器(操作篇)(下)
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- css hack 浏览器携带自身特有的属性 (二)
css hack 浏览器携带自身特有的属性,才是我们真正要解决的css 兼容问题. 这里只是分享思路. 举例子: 1 outline,尤其是一些 自带继承特性的属性.这里指的是 隐性的inherite ...
- 浅谈配置chrome浏览器允许跨域操作的方法
浅谈配置chrome浏览器允许跨域操作的方法 一:(Lying人生感悟.可忽略) 最近有一天,对着镜子,发现满脸疲惫.脸色蜡黄.头发蓬松.眼神空洞,于是痛诉着说生活的不如意,工作没激情,工资不高,一个 ...
- hack (浏览器兼容css hack)
1.hack的原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内 ...
- CSS hack样式兼容模式收藏
part1 —— 浏览器测试仪器,测试您现在使用的浏览器类型 IE6 IE7 IE8 Firefox Opera Safari (Chrome) IE6 IE7 IE8 ...
- 浅谈CSS盒子模型
[摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...
随机推荐
- android 弹出AlertDialog的学习案例
我在编写的时候,测试的关键代码: AlertDialog.Builder builder=new AlertDialog.Builder(MainPointListActivity.this); bu ...
- iOS 25个性能优化/内存优化常用方法
1. 用ARC管理内存 ARC(Automatic ReferenceCounting, 自动引用计数)和iOS5一起发布,它避免了最常见的也就是经常是由于我们忘记释放内存所造成的内存泄露.它自动为你 ...
- Burp Suite使用详解一
本文由阿德马翻译自国外网站,请尊重劳动成果,转载注明出处 Burp Suite是Web应用程序测试的最佳工具之一,其多种功能可以帮我们执行各种任务.请求的拦截和修改,扫描web应用程序漏洞,以暴力破解 ...
- BZOJ 2086: [Poi2010]Blocks
Description 每次可以将大于 \(k\) 的一个数 \(-1\), 在左边或右边的数 \(+1\) ,问最大能得到多长的序列每个数都大于等于 \(k\) . Sol 单调栈. 这道题好神啊q ...
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- 【TIP】已经上架的app在AppStore上搜不到的解决办法
相信很多人都遇到过这个问题,天天刷iTunes connect,终于发现app已经上架了,兴奋的跑过去告诉老板,老板说好,大家都装一个吧!然后大家过来问你怎么搜不到,老板看你都是一副这个表情: 这 ...
- 编译器--__attribute__ ((packed))
1. __attribute__ ((packed)) 的作用就是告诉编译器取消结构在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法.这个功能是跟操作系统没关系,跟编译器有关,g ...
- TFS API:一、TFS 体系结构和概念
TFS API:一.TFS 体系结构和概念 TFS是Team Fundation Server的简称,是微软VSTS的一部分,它是Microsoft应用程序生命周期管理(ALM)工具的核心协作平台, ...
- 【Java EE 学习 68】【单点登录】【两种单点登录类型:SSO/CAS、相同一级域名的SSO】
单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...
- C 标准库系列之limits.h
limits.h 类似于float.h,其定义了一些列类型的值的范围.限制值,也就是说该类型的值不可以大于该上界或者小于该类型值的下界: glibc中宏定义了一下的值: # define MB_LEN ...