浏览器兼容

2017-02-24  本文已影响0人  Chy18

1.什么是 CSS hack?

因为不同浏览器或者不同版本的浏览器所支持的CSS是有区别的,我们利用CSS Hack来使我们的页面更好的在浏览器上展示。
CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
1.属性前缀法(即类内部Hack):例如 IE6能识别下划线_和星号*,IE7能识别星号*,但不能识别下划线_,IE6~IE10都认识\9,但firefox前述三个都不能认识。
2.选择器前缀法(即选择器Hack)
3.IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释):,针对IE6及以下版本:``。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

2.谈一谈浏览器兼容的思路

3.列举5种以上浏览器兼容的写法

1.属性前缀法

.box{ color: red; _color: blue; /* ie6 */ *color: pink; /* ie6 ie7*/ color: yellow\9; /*ie/edge 6-8 */ }

2.条件注释法(ie10以上不再支持条件注释)

<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->`

3.清除浮动

.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; /* 仅对ie67有效 */ }

4.设置元素宽高

.target{ display: inline-block; *display: inline; *zoom: 1; }

5.利用html5shiv、respond

6.利用Modernizr

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets         rgba hsla multiplebgs backgroundsize borderimage borderradius         boxshadow textshadow opacity cssanimations csscolumns cssgradients         cssreflections csstransforms csstransforms3d csstransitions         fontface         generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

4.以下工具/名词是做什么的

5.一般在哪个网站查询属性兼容性?

上一篇 下一篇

猜你喜欢

热点阅读