IInterest » Hack

针对IE8的HACK

Bell — Tue, 03 Nov 2009 09:08:42 +0000

前段时间费了好大的劲才弄了个伪IE8 hack(关于IE8的HACK)…最近发现原来IE8是存在私有hack的,真悲剧…

background:#ff6600\0; /*IE8 hack*/

测试:

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS阴影</title> <style type="text/css"> div{ width:100px; height:100px; background:#f1f1f1; background:#ff6600\0;} </style> </head> <body> <div>这个盒子的背景在IE8下是橙色的</div> </body> </html>

提示：你可以先修改部分代码再运行。

[转]Firefox\Opera\Safari CSS Hack

Bell — Tue, 27 Oct 2009 02:37:40 +0000

能够为 Firefox、Opera、Safari 专写一个 Hack 的情况非常之少，所以以下 Hack 方式在我看来特别新奇。So，做个记录，不做火星人=.=!
normal

.sampleCss{ height:10px; }

1.Firefox 1-2

body:empty .sampleCss{ height:10px; }

2.Firefox

@-moz-document url-prefix(){ .sampleCss{height:10px;} }

3.Safari

@media screen and (-webkit-min-device-pixel-ratio:0){ .sampleCss{height:10px;} }

4.Opera

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){ head~body .sampleCss{ height:10px;} }

来源:http://www.silentash.com/blog/2009/147.html

关于IE8的HACK

Bell — Tue, 20 Oct 2009 15:01:38 +0000

这篇文章悲剧了…请移步针对IE8的HACK

这里介绍的IE8 hack其实名不副实,因为目前我还未找IE8的私有hack,记得beta时期有过,但那些hack在随后的正式版中被修复了,囧.所以IE8的hack其实就是其他浏览器hack的集合…看个例子:

select{ left:-57px; left:4px\9; #left:-57px; _left:-57px;}

left:-57px; 全局定义,所有浏览器都识别 [FF,chrome]
left:4px\9; IE hack,非IE浏览器无法识别 [IE8]
#left:-57px; IE7,6 识别 [IE7]
_left:-57px; IE6 识别 [IE6]

从例子可以看出,先是通过②定义全部IE的样式,再通过③④覆盖定义IE7,6的样式,这样使得IE8的最终解析为 left:4px\9;

虽然复杂了点,但还是可以达到预期的效果…不过最后还是啰嗦一句:Hack就像是止痛药,必要的时候还是可以救急,但滥用的话后果很严重…

Hack:区分IE6/IE7/IE8/FF的一些常用的方法(1)

Bell — Sat, 09 May 2009 07:47:11 +0000

CSS Hack法:写在样式表文件或HTML文档中,运用浏览器的HACK来达到解析不同样式表的目的~注意书写的顺序.

.selector{
color:#ff0000; /* 所有浏览器 */
color:#ff66009; /* 所有IE浏览器 */
+color:#0044dd; /* IE7 */
_color:#000; /* IE6 */
}

看看演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest-hack</title> <style type="text/css"> .selector{ color:#ff0000; /* 所有浏览器 */ color:#ff66009; /* 所有IE浏览器 */ +color:#0044dd; /* IE7 */ _color:#000; /* IE6 */ } </style> </head> <body> <div class="selector"> 这是一个例子,不同的浏览器看到的颜色不同^_^ </div> </body> </html>

提示：你可以先修改部分代码再运行。

IE注释法:写在HTML文档中,只适用于IE浏览器,可以让各版本的IE解析不同的HTML.
语法:

lt IE 7]>
code here

可以做一些高级点的判断：

gt = selects greater than(高于)
lt = selects less than(低于)
gte = selects greater than or equal to(>=)
lte = selects less than or equal to(<=)
! = selects everything except what directly follows the “!”(选择所有,除了!)

看看演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest-hack</title> <style type="text/css"> div{ background:#F0FBFF;} </style> </head> <body> <div>全部浏览器都可以看到这句话~=.=</div> <br />   <div style="display:none\9; background:#FFC;">结合上面的例子,只让非IE浏览器看到~FF、Opera、chrome~</div> </body> </html>

提示：你可以先修改部分代码再运行。

Google Chrome谷歌浏览器的CSS hack

Bell — Thu, 18 Dec 2008 05:31:35 +0000

Google于9月3号推出了浏览器Google Chrome，写前端效果的同志们又有得辛苦了，IE/FF/Opera/Safari/Google Chrome本来不太平的世界更混乱了。

　所幸Google Chrome用的是与Safari一样的Webkit引擎，我们可以使用对safari相似的方式作css hack，写法为：

@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector{/* 针对Google Chrome、Safari 3.0 的CSS样式 */}
}

　　另有一种通过附加#的Css hack对chrome无效，可能是Webkit版本不同。
　　此css hack无效

p.callout { color:#FF0000; font-weight:normal; }
p.callout { color:#000000; font-weight:bold;# }

附：各种常见浏览器使用的内核 (Rendering Engine)

Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari ( WebKit )
Google Chrome ( WebKit )