ie浏览器样式兼容写法_浏览器兼容写法

IE条件注释

属性选择器

选择器前缀法

使用兼容工具

js 修补

IE条件注释

是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

(注:IE10不再支持条件注释)

Paste_Image.png

浏览器符合哪一条,那条就生效。

属性选择器

例如 IE6能识别下划线和星号,IE7能识别星号,但不能识别下划线,IE6~IE10都认识"\9",但firefox前述三个都不能认识。

box{

color: red;

_color: blue; /*ie6*/

*color: pink; /*ie67*/

color: yellow\9; /*ie/edge 6-8*/

}

选择器前缀法

原理与属性选择器类似,在选择器前加前缀,只有某些浏览器能识别,以此来针对性的生效。

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active),

(-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

使用兼容工具

html5shiv.js

IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。所以我们在使用过程中,想要让低版本的浏览器,即IE9以下的浏览器支持,可以使用该工具!

respond.js

IE6-8等老版本的浏览器不支持CSS3的媒体查询功能,那么就可以用这个工具,用 js 去实现响应式。

css reset

对浏览器的默认样式全部重置,全部推倒重来。

normalize.css

标准化CSS,让不同浏览器的CSS样式统一。

Modernizr

Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。

Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。

js 修补

一些简单的兼容问题,可以自己写一段 js 代码去实现该功能

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值