笔记: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 ...
随机推荐
- centos7下keepalived1.3.4安装与使用
keepalived是集群管理中保证集群高可用的一个服务软件,其功能类似于heartbeat,用来防止单点故障. 一.下载keepalived http://www.keepalived.org/ 如 ...
- Jenkins与Git持续集成&&Linux上远程部署Java项目
一.环境搭建 1.安装所需软件 Jdk Maven Jenkins Tomcat Xshell git 以上软件去官网下载,比较简单,不一一描述了 2.安装所需的jenkins插件 Git plugi ...
- c#dev tabcontrol 与嵌套gridcontrol 总结
Gridcontrol设置 1: 拖进去的时候别拖到tabcontrol外边, 否则dock 停靠的时候,停靠错了地方. 2:去掉Drag a column header here to group. ...
- hdu 5475(2015上海网赛) An easy problem
题目;http://acm.hdu.edu.cn/showproblem.php?pid=5475 题意就是给X赋初值1,然后给Q个操作,每个操作对应一个整数M:如果操作是1则将X乘以对应的M,如果是 ...
- ATM作业
关于ATM作业,最近做了很久,才明白,其实看了很久的作业视频讲解,到不如将作业的整个下载下来进行运行,去了解程序本身的结构和运行方式.首先说需求,就感觉是各种懵逼,这才学了函数,和模块之间的简单调用就 ...
- tmux 快捷操作
-- 基本使用 tmux # 运行 tmux -2 以256终端运行 C-b d # 返回主 shell , tmux 依旧在后台运行,里面的命令也保持运行状态 tmux ls # 显示已有tm ...
- python提取百度经验<标题,发布时间,平均流量,总流量,具体的链接>
之前想研究下怎么抓网页数据.然后就有了下面的练习了. 如有BUG.也纯属正常. 只是练习.请勿投入产品使用. #!/usr/bin/python # -*- coding: utf-8 -*- #Fi ...
- 一个漂亮的lazarus做的pagecontrol
厌倦了屏幕上的默认灰色?让我们来欣赏一下商业配色. 这个组件实现了高光,点睛色,描边边等效果, 再配几组色彩,应该非常不错. 基于 lazarus 1.08 大家可以上 www.fpccn.com 看 ...
- c中extern的作用
参考资料: http://www.cnblogs.com/yc_sunniwell/archive/2010/07/14/1777431.html
- The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone问题解决
从错误即可知道是时区的错误,因此只要将时区设置为你当前系统时区即可 因此使用root用户登录mysql,按照如下图所示操作即可. 把时区设置为所在地时区(即东八区的时区)后,再连接数据库就可以了