笔记: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 ...
随机推荐
- 【Linux系列】Ubuntu ping通,xshell无法连接
现象描述:Ubuntu能Ping通主机,主机也能ping通虚拟机.而且,虚拟机也能上网.只是xshell不能连接. 解决方案: 一:使用管理员身份 设置防火墙. 先查看一下防火墙状态 sudo ufw ...
- 12.Mysql存储过程和函数
12.存储过程和函数12.1 什么是存储过程和函数存储过程和函数是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程和函数简化应用开发人员的工作,减少数据在数据库和应用服务器之间的传输, ...
- javascript 高级程序设计 一
前言: 作为一个即将毕业.正在实习的大学生,我也默默的进入了开发者的行列.从一开始的c#编码狗到java程序员再到现在的JS开发者,我一直 希望自己可以在这个'万恶'的互联网时代走的更远.但是我还是一 ...
- fedora如何删除某个包且不删除依赖它的相关包
背景: 软件包编译过程中需要安装依赖,yum-builddep SRPMS/xxx.src.rpm, 有时会遇到“多库版本保护”的问题,从而导致无法安装其他版本的依赖包 解决办法: rpm -e ...
- map reduce 用法 str处理lower() capitalize()
-- s=' l={':9}[s[0]] print(l) 取出dic里面key的元素 def normalize(name): tempn=name.lower().capitalize() ret ...
- 强大的easygrid V7 ,可联系作者
增加历史记录事件 修改bug 修改风格 演示绑定表达式 下载demo
- Netty 源码 Channel(二)核心类
Netty 源码 Channel(二)核心类 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一.Channel 类图 二. ...
- python 日志滚动 分文件
import logging from logging.handlers import RotatingFileHandler import datetime import os def main() ...
- Linux下设置Apache支持Https服务
HTTPS的主要作用: 1)建立一个信息安全通道,来保证数据传输的安全性 2)确认网站的真实性 HTTPS与HTTP的区别: 1)HTTPS协议需要到ca申请证书,免费证书较少 2)HTTP是超文本传 ...
- Ajax(6) Ajax向servlet请求数据库操作 并显示到当前页面 这个未经测试
假设:1.你的页面在Web-Root下,内容为: <div id="showMsg"></div><input type="text&quo ...