笔记: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 ...
随机推荐
- pycurl提示load dll failed 找不到注册程序
原因:python虽然是2.7的 但有小版本区别 建议使用2.7.8
- solrj 测试连接 6.6.5solr集群
我开始环境是 linux上是6.6.5 pom也是6.6.5 按照学习视频的demo,他用的是4点几的solr,我换成了6点几的,没有CloudSolrServer 只有CloudSolrClie ...
- 在threejs中添加两个场景和相机是需要注意render的参数设置
问题:我刚开始设置了两个场景和相机 但是第二个一直将第一个场景给覆盖了一直找不到原因 解决: 问题出在 renderer.autoClear = false;上 设置render的参数如下: rend ...
- 转换 transform
转换 定义: 1.转换是使元素改变形状.尺寸和位置的一种效果 2.又称为变形,即,可以向元素应用 2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 3.2D转换:使元素在 X 轴和 Y 轴平 ...
- Java并发-ConcurrentModificationException原因源码分析与解决办法
一.异常原因与异常源码分析 对集合(List.Set.Map)迭代时对其进行修改就会出现java.util.ConcurrentModificationException异常.这里以ArrayList ...
- window 安装gdal和python
进入 http://www.gisinternals.com/release.php 中下载下图(也可以不是这个版本但是下载的python和gdal一定要版本对应) 1.点击下图中release-17 ...
- javascript 高级程序设计 七
引言:好几天没有写随笔了,项目有点紧,恰好今天项目遇到了比较大阻塞,就只好来写一篇随笔来压压惊. 1.Date类型 创建一个新的Date:(除了new Date()外) var someDate = ...
- tyvj 创世纪 - 基环树
codevs : 传送门 Description 上帝手中有着N 种被称作“世界元素”的东西,现在他要把它们中的一部分投放到一个新的空间中去以建造世界. 每种世界元素都可以限制另外一种世界元素,所 ...
- UI设计教程:关于版式设计
版式设计是视觉传达的重要手段之一,版式设计,即把有限的视觉元素在版面页进行有效的视觉组合,最优化地传达信息的同时,去影响受众,使受众产生视觉上的美感. 版式设计基本流程 在进行版式设计时,设计作品的 ...
- Tag file
JSP 2.0 引入 Tag file ,tag file 以 tag 或 tagx 为后缀,它们可以包含其他资源文件:一个被其他文件包含的 tag file 应该以 tagf 为后缀. 如同JSP页 ...