css浏览器兼容

一.什么是CSS hack。
浏览器兼容,不同的浏览器兼容性不同,对css的解析也不同,有些能够识别一些特定的符号(例如IE67能识别* _)所以可以通过在一些css样式里面加一些特定的符号,让不同的浏览器都能够识别这个属性。

二.谈一谈浏览器兼容的思路。
1.考虑产品的受众,如果是政府等机关使用,则要考虑ie67等老浏览器的兼容,如果是比较年轻时髦的产品,则多注重新版本浏览器的兼容。
2.考虑成本以及老板的要求
3.要考虑具体兼容到哪些浏览器,哪个版本。
4.是选择渐进增加还是优雅降级
5.根据浏览器的兼容选择具体使用的框架,工具

三.列举5种以上浏览器兼容的写法
1.属性前缀:color:red(ie6能识别和_,ie7能识别*)
2.选择器前缀: *div{color:red}
3.color:yellow/9(ie6-8)
4.条件注释
项目 范例 说明
! [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
| [if (IE 6)|(IE 7)] IE6或者IE7
5.伪元素兼容:
.box:after{
content: "";
display: block;
clear: both;
}
.box{
*zoom: 1;
}
6.<!DOCTYPE html>




<html dir="ltr" lang="en-US" class="no-js">

四.以下工具/名词是做什么的
1.条件注释:可兼容于ie10以下的版本,通过对IE版本进行条件的注释来告诉浏览器渲染哪条属性。
2.IE hack:针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
3.js 能力检测:通过特定的文件对浏览器的能力进行检测,从而得知该浏览器的兼容性,然后解决该浏览器兼容的办法。
4,html5shiv.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。
5.respond.js:Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width
6.css reset:Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一.
7.normalize.css:对几乎所有的默认样式进行重置,让所有的浏览器上对于未定义的样式浏览效果达到一致(虽然说无法完全一致,但至少可以消除掉大部分差距)
8.Modernizr:Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。
9.postCSS:它可以被理解为一个平台,可以让一些插件在上面跑,它提供了一个解析器,可以将CSS解析成抽象语法树,通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer,它可以帮我们处理兼容问题,只需正常写CSS,autoprefixer可以帮我的自动生成兼容性代码。

五.一般在哪个网站查询属性兼容性?
caniuse.com

推荐阅读更多精彩内容

  • 1.什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozi...
    饥人谷_bigJiao阅读 549评论 0 1
  • 什么是 CSS hack CSS hack指浏览器各版本之间对CSS解析后展现的效果不一样,针对不同的浏览器去写不...
    柏龙阅读 236评论 0 3
  • CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与F...
    单纯的土豆阅读 5,686评论 1 33
  • 什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozill...
    阿鲁提尔阅读 206评论 0 2
  • 记录工作学习中发现的CSS浏览器兼容问题以及可行的解决方法,为日后的工作提供便利。PS:待完善中... 1.针对I...
    Johnson杰阅读 181评论 0 1