笔记: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 ...
随机推荐
- Web框架Danjgo之session cookie及认证组件
一 Cookie 1 什么是Cookie Cookie翻译成中文是小饼干的意思.其实Cookie是key-value结构,类似于一个Python中的字典.随着服务器端的响应发送给客户端浏览器. 然后客 ...
- 在textarea中鼠标指定的位置插入字符或表情
有些时候我们已经在textarea中输入了一些字符,然后想在鼠标指定的位置插入表情或者字符,这就需要用到jquery的一个小插件了. 代码如下: (function ($) { $.fn.extend ...
- Split Array into Consecutive Subsequences
659. Split Array into Consecutive Subsequences You are given an integer array sorted in ascending or ...
- 22.Mysql磁盘I/O
22.磁盘I/O问题磁盘IO是数据库性能瓶颈,一般优化是通过减少或延缓磁盘读写来减轻磁盘IO的压力及其对性能的影响.增强磁盘读写性能和吞吐量也是重要的优化手段. 22.1 使用磁盘阵列 RAID(Re ...
- 5O - 产生冠军
有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比赛. 球赛的规则如下: 如果A打败了B,B又打败了C,而A与C之间没有进行过比赛,那么就认定,A一定能打败C. 如果A打败了B,B又打败了 ...
- Liunx touch
http://blog.csdn.net/tanga842428/article/category/6355419 linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时 ...
- Xstream将XML转换为javabean的问题
1.问题:Xstream is not security 解决方法:加上 2.问题:如果没有第二行代码,会出现xstream forbiddenclassexception 解决方法:加上第二行,其中 ...
- eclipse中查找某一个字符串
想要完全匹配查找一个字符串,如iCard,而iCardSys或iiCard这种都不行,可以用正则表达式来查找,如下: 参考链接:http://blog.csdn.net/u014656992/arti ...
- 关于nodejs 假设httpserver,会发现一次网页打开,服务端会响应两次的问题;
转自:http://cnodejs.org/topic/518772806d38277306804020 每个页面默认都会再发一个de style="line-height: 21px; p ...
- UOJ 67 新年的毒瘤 - Tarjan
Description 给出一个无向图, 要求找出某个点$u$, 去掉$u$和$u$所连的边, 所剩下的节点构成一棵树. Solution 首先, 割点肯定是不可能满足条件的, 因为去掉割点后会构成若 ...