CSS hack
2015-11-15 15:21
471 查看
CSS hack:为解决浏览器兼容性问题,针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack,hack主要针对IE浏览器
三种形式:
属性级hack:IE6识别_* ,IE7识别* ,FF两个都不识别
选择符级Hack:IE6识别*html ,IE7识别*+html或*:first-child+html
IE条件注释Hack(百度上可直接查到):
针对所有IE:<!–[if IE]><!–您的代码–><![endif]–>
针对IE6及以下版本:<!–[if lt IE 7]><!–您的代码–><![endif]–>
书写顺序:FF——IE7——IE6
常用的CSS hack
/*属性级hack*/
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */ 同理: +color *+color [color
color:red9; /* IE6、IE7、IE8、IE9 识别 */
/* 选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red9; } /* 仅IE9识别 */
只对 IE6:*html 识别 _ * ,在同一选择器中不识别!important
只对 IE7:*+html 识别 * !important,不识别 _
只对 IE67:@media screen\9{...}
只对 IE8:@media \0screen {...}
只对 IE678:@media \0screen\,screen\9{body {...}
只对 IE8910:@media screen\0 {...}
只对 IE910:@media screen and (min-width:0\0) {...}
只对 IE10:@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}
FF:识别!important,不识别 * _
_ IE6专有hack
\9 IE678910的hack
\0 IE8910的hack
\9\0 IE910的hack
三种形式:
属性级hack:IE6识别_* ,IE7识别* ,FF两个都不识别
选择符级Hack:IE6识别*html ,IE7识别*+html或*:first-child+html
IE条件注释Hack(百度上可直接查到):
针对所有IE:<!–[if IE]><!–您的代码–><![endif]–>
针对IE6及以下版本:<!–[if lt IE 7]><!–您的代码–><![endif]–>
书写顺序:FF——IE7——IE6
常用的CSS hack
/*属性级hack*/
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */
*color:red; /* IE6、IE7 识别 */ 同理: +color *+color [color
color:red9; /* IE6、IE7、IE8、IE9 识别 */
/* 选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red9; } /* 仅IE9识别 */
只对 IE6:*html 识别 _ * ,在同一选择器中不识别!important
只对 IE7:*+html 识别 * !important,不识别 _
只对 IE67:@media screen\9{...}
只对 IE8:@media \0screen {...}
只对 IE678:@media \0screen\,screen\9{body {...}
只对 IE8910:@media screen\0 {...}
只对 IE910:@media screen and (min-width:0\0) {...}
只对 IE10:@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}
FF:识别!important,不识别 * _
_ IE6专有hack
\9 IE678910的hack
\0 IE8910的hack
\9\0 IE910的hack
相关文章推荐
- css中关于z-index的使用
- CSS+DIV之1-10
- CSS基础学习十一:选择器的优先级
- 【转载】CSS3 常用四个动画(旋转、放大、旋转放大、移动)
- CSS3 from W3C学习笔记
- css不定宽度居中
- 详解CSS position属性
- 富数据控件 GridView(定义列、格式化、样式)
- css 之相对父元素定位
- 常用的定义按钮的样式方法和按钮被按的变化
- css3基础知识第五章实战训练
- [css]我要用css画幅画(三)
- css3基础知识第四章布局
- css下拉导航栏代码
- css3在线生成器
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
- css3基础知识第三章div盒子
- css布局详解(一)——盒模型
- CSS3 Test
- css 实现元素水平垂直居中总结5中方法