请分享你的CSS Hack

RickyFeng 发布于 2012/02/14 10:46
阅读 737
收藏 17
CSS
Hack 的顺序

使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:

Firefox -> IE6 -> IE7 -> 其他

Hack 的方法

说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.

1. 同一文件中处理.
如: id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.
#bgcolor {
        background:red !important; /* Firefox 等其他浏览器 */
        background:blue; /* IE6 */
}

*+html #bgcolor {
        background:green !important; /* IE7 */
}
IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.

上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).

2. 不同文件中处理.
为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.
<!-- 放置所有浏览器的样式 -->
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- 只放置 IE 必须的, 而不能通过 W3C 的代码 -->
<!--[if IE]>
        <link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->
加载中
0
puras
puras
这个要支持一下~~~
RickyFeng
RickyFeng
有没有这方面的资料,贴上来,快要面试,要补一补
0
六只
六只
万恶的ie,tmd直接就不支持ie。
0
蟋蟀哥哥
蟋蟀哥哥

由于我在网页中插入了facebook like还有google plus等小玩意。

导致W3C通过不了。谁有办法通过呢

0
tyshymy
tyshymy
演示了一个css hack的使用方法来自 http://download.keqie.com/codex.html
#hacker{
	color:red; 
	*color:white; /*for ie6,ie7*/
	*+color:blue; /*for ie7*/
	_color:gray; /*for ie6*/
	color:balck !important; /*for firefox*/
	color:yellow \9; /*for ie9*/
}
返回顶部
顶部