CSS hack

hack
CSS hack

IE条件注释

outline
outline 与 border 的区别

outline兼容

before after

清除浮动

display table-cell

display inline-block

IE Quirks

问题

hack

CSS hack

IE6能识别

*

， 但不能识别

!important

，IE6支持属性前加下划线（IE7 FF不支持）。

IE7能识别

*

, 也能识别

!important

。

Firefox不能识别

*

，但能识别

!important

。

hack	写法	实例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	绿色	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	黄色	Y	Y	N	N	N	N	N	N	N	N
_	_color	蓝色	Y	Y	N	Y	N	Y	N	Y	N	N
#	color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	红色	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue!important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

-

减号是IE6专有的hack

\9

IE6/IE7/IE8/IE9/IE10都生效

\0

IE8/IE9/IE10都生效，是IE8/9/10的hack

\9\0

只对IE9/IE10生效，是IE9/10的hack

IE条件注释

IE可识别
<!--[if IE]> Only IE <![endif]-->

只有IE5.0可以识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>只在IE6以上(包括IE6)版本IE浏览器显示<![endif]-->

IE5.0以上版本
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->

IE6以下版本
<!--[if lt IE 6]> Only IE 6- <![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>非IE8浏览器显示<![endif]-->

非IE浏览器生效
<!--[if !IE]>非IE浏览器显示<![endif]-->

outline

outline: outline-color outline-style outline-width inherit

inherit：规定是否从父元素继承outline属性的设置

outline 与 border 的区别

border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。

outline 不会象border那样影响元素的尺寸或者位置。

outline兼容

如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。

IE为HTML元素扩展了一个

hideFoucs

属性

hideFoucs="true"

时则获得焦点的虚线框不出现。

Firefox1.5 全面支持，早期的1.0.x有

-moz-outline

::before ::after

伪元素不是伪类，为了和伪类区分，双冒号。

伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

伪元素如果没有content属性则不起作用，可设置空字符串。

浏览器支持：

- Chrome 2+,

- Firefox 3.5+ (3.0 had partial support),

- Safari 1.3+,

- Opera 9.2+,

- IE8+ (with some minor bugs),

清除浮动

如果父元素未设置height，那么父元素的height就由子元素撑开，而子元素设置了float脱离了正常的文档流，那么父元素的height就会被忽略。

display: table-cell

浏览器支持：

IE8+

display:table-cell 可能会被float, position: absolute等破坏，

设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性

display: inline-block

IE6/7中的inline元素只要触发了hasLayout其表现就类似inline-block，设置

zoom:1

display: inline-block

等其他属性可触发hasLayout。

对于IE6/7中的block元素，即使触发了hasLayout元素也无法不换行，这时可以强制为inline元素不换行，然后通过zoom触发hasLayout就可设置宽高：

{
display: inline-block;
*display: inline;
*zoom: 1;
}

IE Quirks

Q Quirks mode 怪异模式或混杂模式
S Standards mode 标准模式

-  6SQ
*  6SQ   7SQ    8Q     9Q    10Q
+  6SQ   7SQ    8Q     9Q    10Q
_  6SQ   7Q     8Q     9Q
#  6SQ   7SQ    8Q     9Q
\0      8S   9S
\9\0    9S  10S
!important   7S  8S  9S 10S 10Q

问题

img标签在a中，ie有蓝色边框?

img设置

border: 0px

ie8/9 a标签点击出现边框虚线

a { hidefouce: true;}

其他浏览器

a:fouce {outline: 0;}

IE7/8 border-radius 圆角

只能用图片