-
[原]解决IE5/IE5.5/IE6/FF的兼容性问题
2006-03-13 | Tag:原创 CSS
之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题。不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团,一直听说IE5是WEB标准制作的一个“钉子户”,现在不得不相信了。
既然有问题,那就找找解决的方法咯,在网上一搜,相关的文章还是不少的,觉得最直接的方法还是“IE条件注释”,很方便的就能为IE的不同版本写样式。但这样就得为每个版本写一个样式,不利于文件的优化。
找了一些相关的CSS HACK后,觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的,经过测试,终于找到了一个不错的方法,下面我们来看看怎么实现:
大家都知道用!important声明可以提升指定样式规则的应用优先权,如下面的例子:
-------------------------------------------------
E1{
background-color: red !important;/*提升优先权*/
background-color: blue;
}
-------------------------------------------------但这样写在IE中会有个问题,看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》,你会知道在IE6和FF中用!important声明可以提高优先级别,但在IE6中的!important声明并不是绝对的,它会被之后的同名属性定义所替换。也就是说在上面的例子中,IE6所应用的是最后一个背景色的值,即“blue”;而在FF中背景色的值为“red”。根据这一点,我们就可以把FF和IE的样式分离开。
OK ,解决了FF和IE的问题,现在来解决IE自己的问题。
看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发,使用“>”IE是否真的可以认得?我们来看个例子:
-------------------------------------------------
E1{
background-color: red;
>background-color: blue;
}
-------------------------------------------------在FF中得到的是背景色红色,而在IE中得到的背景色是蓝色,根据样式重定义的规则,如果浏览器可以识别“>”,则应该得到的蓝色的背景,因此可以知道“>”只有IE可以识别,这点是很重要的哦!在后面大家就会知道了。(注:我测试过其它的一些符号,如“~”、“`”、“<”等,都只有IE可以识别,在此为了感谢嘟嘟,推荐使用“>”)
我们再来看个例子:
-------------------------------------------------
E1{
>/*IE only*/background-color: black;
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------这个例子在IE6中得到了黑色的背景;而在IE5.5中得到的绿色的背景;在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别,这是个很早就公布的HACK,可以在网上找到相关的资料,要注意的就是在属性名之后是有一个空格的。到此我们已经把FF、IE5.5、IE6分离出来了,那IE5呢?其实现在我们只要把IE5跟IE6分开就OK了,来看看例子:
-------------------------------------------------
E1{
>/*IE only*/background-color: red;/*IE5*/
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;
}
-------------------------------------------------这里我们又用到一个HACK,就是“E1/**/{}”,这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是,在IE5中的背景色为红色;在IE5以上版本中得到的是黑色背景。
终于把不同版本的浏览器都分离出来了,这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子:
-------------------------------------------------
E1{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------需要注意的是,在上面例子中“background-color”定义的顺利不能改变,即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”,因为“E1/**/{}”这个HACK在FF中可以识别。也许你会想,上面的例子不是可以写成:
-------------------------------------------------
E1{
width: 500px;
height: 50px;
background-color: red;/*FF*/
>background-color: blue;/*IE5*/
text-align:center;
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------这样不就又可以省下几个字节?是没错,可是HACK不是标准,如果滥用HACK,那只会离标准越来越远!
-
今天终于来到了腾讯公司的办公大楼,在深圳南山区的飞亚达大厦。刚好今天是腾讯的招聘日,在五楼大厅里,有很多的来自各地的高手
来应聘,场面很热闹,在大厅里至少有超过15个的不同部门的招聘摊位。看了一下在我之前的应聘者,很多都是埋头写着,过去偷偷看了一下,才知道原来是在写“试题”。代码要求手写
,一时把我吓了一跳,这也太那个了吧,到目前还没有遇到过面试的试题是要在纸上写代码的,对于用惯了“Ctrl+C和Ctrl+V”的人来说,这可是一大挑战。问了一下“咨询处”,得要“指示”到前面“网页制作”的摊位去看看,我来到“网页制作”的摊位前排队,在我前面的有两个应聘者,考官跟他们谈了一会后给了他们一张纸,就让他们走开了……有点紧张,我昨晚写到十二点多的简历没有打印出来,因为我做成了网页的形式,打印就没“意思”了,结果正如我所料的,一坐下去,那考官就问我有没简历~没有~去那边先填个表吧~于是我只好到旁边拿了个“求职表”填填了……
好不容易填好了简历,再次到“网页制作”的摊位前一看,已经排了好几个来应聘的人了,心想还是先打个电话吧,再怎么说人家也是要我来的时候打电话给他先的,还是先联系下好……还好打了电话,原来是要我到七楼的。
到了七楼,原来那里是办公的地方,足足有足球场那么大,每个位子上都放着超可爱的QQ公仔
,有大有小,真的很有意思……
后面的面试过程就略过吧,也是要我做“题”,不过幸运的是我不用在纸上做!
个人感觉还是不错的,现在就等我把“题”做好了!下星期又是一堆的工作……看来又得“熬夜”了。 -
绕过IE6支持IE5的别一种写法-IE也支持>
2006-03-10 | Tag:CSS 文章分享 代码分享
公共定义
#show,#show1,#show2,#show3,#show4,#show5,#show6,#show7,#show8{
width:400px;
margin:20px;
padding:20px;
}
.show1,.show2,.show3,.show4,.show5,.show6{
width:400px;
margin:20px;
padding:20px;
}
ID测试1
*>html #demo1#test1 #show1
{
background-color : #999;
color:#fff;
}
id测试2
* html>#demo2 #test2 #show2
{
background-color : #999;
color:#fff;
}
id测试3
* html #demo3>#test3 #show3
{
background-color : #999;
color:#fff;
}
id测试4
* html #demo4 #test4>#show4
{
background-color : #999;
color:#fff;
}
id测试5
* html #demo5>#show5
{
background-color : #999;
color:#fff;
}
id测试6
* html #demo6 #show6
{
background-color : #999;
color:#fff;
}
id测试7
* html #demo7#show7
{
background-color : #999;
color:#fff;
}
小结:从5~6~7时~ ID测试567是一样的~应该是IE5把忽略 >class测试1
*>html .demo1.test1 .show1
{
background-color : #999;
color:#fff;
}
class测试2
* html>.demo2 .test2 .show2
{
background-color : #999;
color:#fff;
}
class测试3
* html .demo3>.test3 .show3
{
background-color : #999;
color:#fff;
}
class测试4
* html .demo4 .test4>.show4
{
background-color : #999;
color:#fff;
}
class测试5
* html> .demo5 .test5 .show5
{
background-color : #999;
color:#fff;
}
class测试6
* html.demo6 .test6 .show6
{
background-color : #999;
color:#fff;
}
class测试7
.test7.show7
{
margin:20px;border:1px solid #f00;
}
class测试8
.test8 .show8
{
margin:20px;border:1px solid #f00;
}
原来大家的写法
@media tty {
i{content:"\";/*" "*/}};#show
{
background-color : #999;
color:#fff;
}
{;}/*";}
}/* */
总结 IE5会把忽略">" ,而且跟在html后面如果是ID,连着写IE5也是认识的(见class测试6,id测试8), 虽然IE5不能支持">",可是IE6不认识">" 我们就可以利用IE5 和IE6 对">"的不同解析,用他来绕过IE6.
测试环境:windows2000+IE5, window2000 +IE6, window98升级2K+IE5转自Beautiful Style 演试文件 作者:嗷嗷
-
[原] CSS样式的优先级补遗
2006-03-09 | Tag:原创 CSS 优先级
以前写过一篇《关于CSS样式的优先级问题》,当时由于对浏览器的兼容性问题没有太多的了解,所用到的例子也没有提到与浏览器相关的内容,在此做一下补充:
在此要特别提到!important声明,下面还是用以前的那个例子:
-----------------------------------------
<style type="text/css">
<!--
#aaa{
background-color: Fuchsia;
}
.aaa{
background-color: Black;
}
td{
background-color: Aqua !important;
}
-->
</style>
<table>
<tr>
<td class="aaa" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------td将会显示为Aqua,这在IE4+的浏览器与支持!important声明的都是正确的,但如果换成这下这样:
-----------------------------------------
<style type="text/css">
<!--
#aaa{
background-color: Fuchsia;
}
.aaa{
background-color: Black;
}
td{
background-color: Aqua !important;
background-color: Green;
}
-->
</style>
<table>
<tr>
<td class="aaa" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------这个例子的结果是在IE4+的浏览器中td的颜色为Blue,而在FF中的颜色为Aqua 。这说明了在IE4+浏览器中的!important声明并不是“真正的提高优先级”,或说是“不完全的声明”,在声明之后如果有新的、相同属性名的定义,!important声明将会失效。而在FF中,!important声明在同个样式类中的优先级始终是最高的。
因此,当要修正IE与FF中的差异时,就可以使用第二个例子中的做法,大多数是用于修正定位的问题。
-
有人说:“机遇总是在不知不觉中来到你面前,只有时刻的准备着,才能在机遇离开之前抓住它。”
今天中午一个自称是“腾讯公司互联网业务系统网站制作主管”的人联系我,说要跟我见下面,这是真的吗?
我真的不敢相信,为什么会找上我?一时间很多的疑问、兴奋、担心……真可以说是百感交集。这如果是真的,那就是一个很大的机遇了,可以让我的技术在短时间内提升的机会,可以更快的接近我的所谓“理想”…… -
JSUIX“DOS界面的WEB”
2006-03-07 | Tag:推荐
一个把DOS界面的程序移植到Web的网站,感觉很爽。
JS/UIX is an UN*X-like OS for standard web-browsers, written
entirely in JavaScript (no plug-ins used). It comprises a vir-
tual machine, shell, virtual file-system, process-management,
and brings its own terminal with screen- and keyboard-mapping.
For an overview of implemented commands have a look at the
complete > JS/UIX-Manual-Pages; see also the > Version-History.
The keyboard accepts the US-ASCII character set.
As key-mapping depends from your browser, you may have to use
the cursor and backspace buttons at the lower right of the
terminal. A complete keyboard can be accessed at the lower left.
Compatibility: Netscape 4+, MS IE 4+ and DOM-aware browsers.
JS/UIX is not a free software. For a free to use terminal-
interfaces have a look at mass:werk termlib.js.
© 2003 mass:werk, N.Landsteiner













