浏览器兼容

1.什么是 CSS hack

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

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

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

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

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
css:after{
content: " ";
display: block;
clear: both;
}
css{
*zoom: 1;
}
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
.element{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.all IE{property:value\9;}
.gte IE 8{property:value\0;}
.lte IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
.not IE{property//:value;}

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

  • 条件注释:HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。IE10不再支持条件注释。语法:
<!--[if * IE N]--><条件语句><![endif]-->(其中“*”为下列值或为空,N为IE版本号)
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
!  :就是不等于的意思,跟javascript里的不等于判断符相同。
  • IE Hack:利用IE各版本的特性与bug进行CSS Hask。如ie10以下可以使用条件注释,ie6可识别“*”等。
  • js 能力检测:就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题。
  • html5shiv.js:是一套实现让ie低版本等浏览器支持HTML5标签的解决方案。
  • respond.js:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
  • css reset:将浏览器的默认样式全部去掉,就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
  • normalize.css:根据实际需求合理地修改Html元素的默认样式,修复浏览器自身的Bug。
  • Modernizr:是一个用来检测浏览器功能支持情况的 JavaScript 库。
  • postCSS:是一个通过自定义插件和工具来改造CSS的平台。

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

caniuse.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是 CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什...
    怎么昵称阅读 3,130评论 0 1
  • 1、什么是 CSS hack 不同厂商的浏览器(比如Internet Explorer,Safari,Mozill...
    zh_yang阅读 2,890评论 0 0
  • 一、前言 做前端开发,必然少不了浏览器,然而不同的厂商有着各自版本的浏览器,不同的浏览器对css的理解和解析不一样...
    青鸣阅读 3,480评论 0 2
  • 1.什么是 CSS hack? 以下是引自百度文库的定义: 简单地讲,css hack指各版本及各品牌浏览器之间对...
    饥人谷_Young丶K阅读 3,021评论 0 6
  • 什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozill...
    liushaung阅读 2,472评论 0 2

友情链接更多精彩内容