笔记:CSS hack的学习与了解…
更新时间:2015.05.12
兼容范围:
- IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome
参考资料:
- 各游览器常用兼容标记一览表:
| 标记 | IE6 | IE7 | IE8-10 | FF | Opera | Sarari |
|---|---|---|---|---|---|---|
| [* + > <] | √ | √ | X | X | X | X |
| _ [*html .class{}] | √ | X | X | X | X | X |
| \9 | √ | √ | √ | X | X | X |
| \0 | X | X | √ | X | √ | X |
| @media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} | X | X | X | X | X | √ |
| .bb , x:-moz-any-link, x:default | X | √ | X | √(ff3.5及以下) | X | X |
| @-moz-document url-prefix(){.bb{}} | X | X | X | √ | X | X |
| @media all and (min-width: 0px){.bb {}} | X | X | X | √ | √ | √ |
| * +html .bb {} | X | √ | X | X | X | X |
| 游览器内核 | Trident | Trident | Trident | Gecko | Presto | WebKit |
注意点:
- 网上很多资料中常常把!important也作为一个hack手段,其实这是一个误区。!important常常被我们用来更改样式,而不是兼容hack。——造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。但注意一下,IE6只是在某些情况下不识别(ie6下,同一个大括号里对同一个样式属性定义,其中一个加important 则important标记是被忽略的,例:{background:red!important; background:green;} ie6下解释为背景色green,其它浏览器解释为背景色red;如果这同一个样式在不同大括号里定义,其中一个加important 则important发挥正常作用,例:div{background:red!important} div{background:green},这时所有浏览器统一解释为背景色red。)
- 个人不太推荐使用hack,尽可能不使用hack的情况下实现需求,做到较好的用户体验。
- CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
阅读链接:
http://www.duitang.com/static/csshack.html
http://blog.csdn.net/freshlover/article/details/12132801
笔记:CSS hack的学习与了解…的更多相关文章
- 从今天开始 每天记录HTML,CSS 部分的学习笔记
从今天开始 每天记录HTML,CSS 部分的学习笔记
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
随机推荐
- 运行msckf_vio
MSCKF_vio是一种基于多状态约束卡尔曼滤波器的双目视觉里程计.其中多状态约束是指将多帧图像的相机位姿加入卡尔曼状态向量中,在进行卡尔曼增益之前通过多帧图像之间的约束进行最小二乘优化来估计特征点 ...
- Query to find the eligible indexes for rebuilding
Query to find the eligible indexes for rebuilding The following script can be used to determine whic ...
- webpack接上一篇
html-webpack-plugin 自动生成html文件 安装:npm install html-webpack-plugin --save-dev 使用 在webpack.config.js中引 ...
- Django 前端Wbe框架
Web框架本质及第一个Django实例 Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web ...
- PHP的网站主要攻击方式有哪些?
1.命令注入(Command Injection) 2.eval注入(Eval Injection) 3.客户端脚本攻击(Script Insertion) 4.跨网站脚本攻击(Cross Site ...
- Redhat Linux网卡配置与绑定
Redhat Linux的网络配置,基本上是通过修改几个配置文件来实现的,虽然也可以用ifconfig来设置IP,用route来配置默认网关,用hostname来配置主机名,但是重启后会丢失. 相关的 ...
- XStream将XML转javaben,出现多余的tag,导致出错
今天在测试银联无卡快捷支付的案例时,多了一个多tag兼容性测试,它是指银联的XML报文中会出现多余的tag,如果我们用XStream解析的时候,没有Javabean的字段可以对应上,就会报错!提示: ...
- HISAT2,StringTie,Ballgown处理转录组数据
HISAT2,StringTie,Ballgown处理转录组数据 本文总阅读量次2017-05-26 HISAT2,StringTie,Ballgown处理转录组数据思路如下: 数据质控 将RNA-s ...
- Delphi各种Socket组件的模式和模型
Delphi各种Socket组件的模式和模型 Delphi的大多数书籍里面都没有提到delphi的各种socket通信组件的模式和模型,有的书只讲解了windows的socket模式和模型,并没有归纳 ...
- 在HashTable上下文中,同步指的是什么?
同步意味着在一个时间点只能有一个线程可以修改hash表,任何线程在执行HashTable的更新操作前都需要获取对象锁,其他线程需要等带锁的释放.