浏览器兼容

1.什么是 CSS hack

CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。针对不同的浏览器写不同的css,能在不同的浏览器得到想要的效果

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

  • 以最大程度完善设计稿为基础,再考虑兼容性,不能为盲目为了兼容问题而弃用方便简洁的新方法(如html5、css3);当然也不能用过新的技术方法使得兼容性过于低、实用性差。
  • 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  • 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

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

  • CSS里可以给属性或者选择器写hack。属性例如: background:blue;_background:red;选择器例如: html #demo {width:120px;} *+html #demo {width:130px;}
  • HTML 针对所有IE:<![endif]-->
  • IE7:*background:red; IE6:_background:blue;
  • !important
  • -webkit- ,-moz-,-ms-,-o-,针对不同浏览器的不同前缀

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

  • 条件注释:条件注释是一种安全的区分IE浏览器版本的语法,是一种浏览器兼容的方法
  • IE Hack:针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
  • js 能力检测:不同浏览器支持的js方法不同,封装函数解决或对象解决兼容性问题
  • html5shiv.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题
  • respond.js:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒体查询
  • css reset:把浏览器提供的默认样式覆盖掉,重置默认样式
  • normalize.css:是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。
    保留有用的默认值,不同于许多 CSS 的重置;标准化的样式,适用范围广的元素;纠正错误和常见的浏览器的不一致性;
    一些细微的改进,提高了易用性;使用详细的注释来解释代码。
  • Modernizr:提供了一种简单的方式检测任意新特性,从而让我们可以采取相应的操作
  • postCSS:一个使用JS 插件来转换CSS 的工具

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

caniuse.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS Hack 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展示的页面效果不...
    zx9426阅读 407评论 0 0
  • 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的...
    大女表哥阅读 1,127评论 0 9
  • 什么是 CSS hack CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什...
    怎么昵称阅读 405评论 0 1
  • 一、如何调试 IE 浏览器? IE调试的一般方法(css): 使用高版本IE控制台(对于IE7以上)IE11的开发...
    婷楼沐熙阅读 562评论 0 6
  • 转载自 Android Studio 使用Gradle多渠道打包Androidjavaloonggg 2016年0...
    a帆仔阅读 570评论 0 0