转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
【总结】浏览器CSS Hacks汇总
浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等)。
CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则。实现浏览器兼容主要有两种方式条件样式表和CSS Hacks(Selector Hacks、Attribute Hacks)。对此根据一些资料汇总了一些CSS Hacks方法。
1.条件样式表
像这样的代码你应该见过:
<!--[if IE]>
<link rel="stylesheet" type="text/css"href="css/ie.css" />
< ![endif]-->
PS:yahoo的内部编码最佳做法并不建议使用有条件的样式表。它会增加额外的平均1或2个HTTP下载请求(参考这里)。
2.选择器Hacks(Selector Hacks)
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (IE 6,7以外) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 及以下, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* IE6-8以外 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
PS:选择器Hacks方式比较多, 但只要代码写得够标准, 其实要 Hack 的地方不会很多的, 除了有时候IE捣乱,IE 以外的浏览器几乎都不会有问题。
3.属性hacks(Attribute Hacks)
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* 或 #color: blue */ }
/* IE6以外 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* 仅IE8 */
#veinte { color: blue\0; }
#bgcolor {
background:red !important; /* Firefox 等其他浏览器 */
background:blue; /* IE6 */
}
#test {
background-color: black; /* Firefox, Opera, IE8 */
[;background-color: green;] /* Safari, Chrome */
*background-color: blue; /* IE7 */
_background-color: red; /* IE6 */
}
PS:属性hacks混写要注意书写次序。
最后,看一下这个测试页面吧(演示)
转载于:https://www.cnblogs.com/liangxiaojie/p/4600498.html
转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks相关推荐
- IE6,IE7,IE8 css bug汇总以及兼容解决方法
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
- ie6,ie7,ie8 css bug汇总以及兼容解决方法 - xhuangtao
1:li边距"无故"增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...
- css多行省略号兼容ie,css超出2行部分省略号……,兼容ie
html> Page Title .wrap { height: 40px; line-height: 20px; overflow: hidden; } .wrap .text { float ...
- Css中相关的表达方式
Css中相关的表达方式 - Css中的颜色的表示方法 - 背景相关属性 - 尺寸相关属性 - 盒子模式 - Css中的颜色的表示方法 RGB(red greed bule)(0,10,256) #00 ...
- Html CSS的三种链接方式
感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...
- CSS常见的浏览器兼容汇总
CSS常见的浏览器兼容汇总 一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1.渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2.脚本相关:和脚本相关的问题,包括JavaSc ...
- IE浏览器和火狐浏览器兼容问题——CSS篇
一.css+div 样式 IE与FF兼容问题汇总 CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点. 1.DOCTYPE 影响 CSS 处理 ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
最新文章
- 学python需要什么基础知识-Python学习(一)基础知识
- unity3d做会减少的血条_Unity3d中NGUI加强版血条(Healthbar)的制作
- 搅动金融科技的人工智能,能否颠覆支付格局?
- python数学计算函数_Python 内置函数(数学运算类,逻辑判断类)
- verilog赋多位值_verilog赋值
- ASP.NET Core 2.0 + EF6 + Linux +MySql混搭
- android word设计模式,word07设计模式
- UIAlert的使用
- Linux系统中输入输出管理
- 学习拾遗--用RadioButtonList 或者DropDownList 进行动态赋值问题
- npm+node+cordova+ionic 版本匹配
- JavaScript:继承详解
- 前端常用插件、工具类库汇总,不要重复造轮子啦!!!
- spring异常:Could not resolve placeholder
- 贪心宝贝话说上回讲到海东集团面临内外交困,公司的元老也只剩下XHD夫妇二人了。显然,作为多年拼搏的商人,XHD不会坐以待毙的。 一天,当他正在苦思冥想解困良策的时候,突然想到了自己的传家宝,那是公司成
- java基础类库——数字操作类(五)
- 支付网关和api网关_什么是支付网关
- 浅析Kafka实时数据处理系统
- 一阶系统开环传递函数表达式_机械振动理论(2)-多自由度系统
- CommandArgument属性 绑定参数