浏览器兼容

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.谈一谈浏览器兼容的思路

  • 首先,要确定是否需要做浏览器兼容。
    产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
    成本的角度 (有无必要做某件事)
  • 其次,思考要做到什么程度。
    让哪些浏览器支持哪些效果。
  • 最后,要怎么做。
    根据兼容需求选择技术框架/库(jquery)
    根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
    postCSS
    条件注释、CSS Hack、js 能力检测做一些修补

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.以下工具/名词是做什么的

  • 条件注释
    条件注释是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
  • IE Hack
    针对IE浏览器编写不同的CSS让IE能够正常渲染。
  • js 能力检测
    浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
  • html5shiv.js
    解决ie9以下版本的浏览器对html5标签无法识别的问题。
  • respond.js
    提供一个小脚本,以便在不支持CSS3媒体查询的浏览器中启用响应式网页设计,特别是ie8及更低版本。
  • css reset
    重置浏览器默认样式。
  • normalize.css
    Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。
  • Modernizr
    Modernizr是一套JavaScript 库,用来侦测浏览器是否支持HTML5与CSS3等规格。如果浏览器不支持,Modernizr会使用其他的解决方法来进行模拟。
  • postCSS
    PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合,转化css3的新特性语法、行内图片等。

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

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

推荐阅读更多精彩内容

  • 什么是 CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什...
    怎么昵称阅读 380评论 0 1
  • 什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozill...
    阿鲁提尔阅读 261评论 0 2
  • CSS Hack 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展示的页面效果不...
    zx9426阅读 378评论 0 0
  • 本文版权归饥人谷和本人所有 1.什么是 CSS hackCSS hack由于不同厂商的浏览器,比如Internet...
    饥人谷_xxxxx阅读 296评论 0 0
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 455评论 0 1