酷源软件产品交流论坛酷源KYCMS交流区『 KYCMS模板下载区 』 常用css hack的用法。用css+div不能不知的方法啊。

1  /  2  页   12 跳转 查看:846

常用css hack的用法。用css+div不能不知的方法啊。

常用css hack的用法。用css+div不能不知的方法啊。

如果不会用hack的话,那不如直接用table,因为那样就不会遇到浏览器兼容问题了。以下是常见hack的使用方法。 [code]  除了@import针对IE4的隐藏代码处理外,css hack还有许多别的应用形式,包括针对不同浏览器及浏览器的不同版本,同一浏览器的不同版本等各种各样隐藏代码方法,我们将讨论几种常用的css hack形式及使用方法。注意:我们主要讨论每一个css hack方法对目前常用的两种浏览器的支持程度,我们将标出针对Windows平台下IE浏览器系列各版本和Mozilla/Firefox的支持,其中Mozilla及Firefox浏览器由于使用同一内核开发,因此可以理解为同一浏览器产品。[/code]
 

回复: 常用css hack的用法。用css+div不能不知的方法啊。

[b][size=6]@import [/size][/b]前面我们以@import的方法作为了css hack的示例代码,实际上@import的用法远不止这么简单,一个小小的改动,都有可能导致解析上的一些变化,我们这里详细了解一下@import的使用方法:在@import中使用url来导入样式,标准用法便是将url中的值带上引号,例如:@import url("newsstyle.css");带引号的url地址,只能够被IE5及以上浏览器以及Mozilla/Firefox所识别,IE4及以下版本的浏览器不会解析newstyle.css。@import这样的使用方法主要用于IE4的区分,我们将IE4的css代码直接写在样式文件之中,而可以将IE5及以上浏览器的样式代码编写在newstyle.css中,使用@import进行调用,从而实现了IE4的单独处理。另一个方法是:@import url("noneIE.css") screen; screen参数是css中提供的用于指定设备类型的选项,使用screen表示用于屏幕显示,使用print表示用于打印设备的显示,而比较有意思的是,IE全系列浏览器对设备类型都不支持,因此可以利用这个来做IE浏览器的区别处理,使用以上代码,noneIE.css中的样式在IE系列中都将不会解析,只会被Mozilla/Firefox解析,这样就做到了IE与Mozilla/Firefox的区别处理
 

回复:常用css hack的用法。用css+div不能不知的方法啊。

注 释
我们都知道css中的注释语句,使用/∗ ∗/来标记一段注释内容。由于版本升级的原因,在对注释的解析上,IE浏览器也有所区别,因此可以利用注释语句来进行css hack,如以下代码:
#content/∗∗/ {color-size:18px;}

在选择符与大括号之间使用注释语句,这样的代码在IE6中看上去是可以显示的,而IE5及以下浏览器就不会处理,因此可以针对IE6及IE5进行单独处理,例如(示例):
#content {
font-size:15px;
}
#content/∗ ∗/ {
font-size:30px;
}

在css的执行顺序中,后一个总能覆盖前一个,因此当IE6与Firefox执行到这里时,将使用后一个font-size:30px;的样式代码进行最终处理,而IE5由于对/∗ ∗/注释代码并不解析,因此IE5认为只是第一段代码,最终样式将使用font-size:15px;进行显示。

注意:选择符与/∗ ∗/之间,不允许有空格存在,如果有空格存在的话,该css hack将不会产生任何作用。
 

回复:常用css hack的用法。用css+div不能不知的方法啊。

属性选择符
css2中提供了一种新选择符,我们称之为属性选择符,用于对具有特定属性的对象进行选择,使用方法如下:
span[class=left] {color:blue;} 表示对所有class名为left的span进行选择,等同于:span.left {color:blue;}

当然,属性class可以替换为其它属性,例如:
span[title] {color:blue;} 表示对所有具有title的span对象进行选择。

这是css中一个非常优秀的选择符方法,但是IE浏览器即使至今也没有对这种方法提供支持,因此属性选择器在Mozilla/Firefox中工作正常,而对IE系列浏览器没有任何作用,因此可以利用此方法进行IE浏览器与Mozilla/Firefox浏览器进行区别处理,如以下代码(示例):
span.content {
color:blue;
}
span[class=content] {
color:red;
}

在IE浏览器之中,class为content的span对象字体颜色将显示为蓝色,而同一对象在Mozilla/Firefox之中将使用第二段样式代码,字体颜色将显示为红色。笔者在实际网站开发的过程中,经常使用属性选择符方法来进行IE与Mozilla/Firefox之间的区别处理,方便与这个简单的例子大同小异,代码如下(示例):
#content {
color:red;
}
[xmlns] #content {
color:red;
}

在第二个选择符中,使用[xmlns]作为顶级选择符,需要注意,使用此方法必须让你的html标签加上xmlns属性,例如:
<html xmlns="http://www.w3.org/1999/xhtml">

只有这样,才保证页面中拥有xmlns这个属性,这样一旦需要对Mozilla/Firefox进行单独处理,只需在相同选择器前面加上[xmlns]就可以对Mozilla/Firefox编写单独的样式表代码,而且在标准的xhtml网页中,html标签也是默认就拥有了xmlns属性,因此用此方法非常方便实用。
 

回复:常用css hack的用法。用css+div不能不知的方法啊。

子对象选择符
子对象选择符有点类似于包含选择符,子对象选择符也是css中提供的一个选择型式,使用方法如下:
span>p {color:blue;}  等同于包含选择符: span p {color:blue;}

子对象选择符虽然在css中提了出来,但IE浏览器依然没有提供对这种方法的支持,因此只有Mozilla/Firefox可以识别,同属性选择符的css hack一样,这种选择符也可以帮助我们区分IE与Mozilla/Firefox,例如:
span.conten {
color:blue;
}
span>.content {
color:red;
}

在IE中span下的class名为content的文本将呈现为蓝色,而同样对象在Mozilla/Firefox下的文本将呈现为绿色。
 

回复: 常用css hack的用法。用css+div不能不知的方法啊。

voice-familyvoice-family属性看上去非常陌生,是css中针对残疾人使用的设备进行特别设置的一个方法,voice-family可以指定网页中的内容使用那一种声音进行朗读,在特殊的盲人阅读设备上,使用此方法可以用于设置阅读方式,而现在将成为针对IE6以下浏览器的一个特殊的css hack方法,使用方法如下:#content {voice-family:"\"}\"";voice-family:inherit;color:red;}使用与同代码中相同的二段voice-family属性之后,下面的color:red;将不会被IE5.5及以下浏览器解析,因此使用以下代码(示例):#content {color:blue;voice-family:"\"}\""voice-family:inherit;color:red;}由于voice-family CSS hack之后的代码将使IE5.5解析不到,因此在IE6与Mozilla/Firefox上,id为content的对象中的文本将呈现为红色 ,而在IE5.5及以下版本的浏览器之中,将呈现为蓝色。这个方法区别于前面提到的注释方法,注释方法的隐藏对象是IE5及以下版本,而voice-family方法将针对IE5.5以下版本。除此之外,voice-family还可以使用另一种处理方法,代码如下(示例)::#content {color:red; /∗IE6,Mozilla,Firefox可见∗/voice-family:""}"";voice-family:inherit;color:blue;/∗IE5可见∗/}html> #content {color:blue;}这里voice-family值变成了""}"";我们不需要去追究这些字符的原理,因为这些字符是浏览器开发上的一些原因形成了解析上的bug,而所要做的只是利用这些bug来完成对浏览器的兼容性处理。使用这个方法将使IE6及Mozilla/Firefox的文字为红色,而IE5及以下版本则显示为蓝色,是与上一种voice-family相反的处理方法,这种方法等同于注释方法。以上列举的这些css hack都是在实际开发中经常使用到的css hack,大部分实际存在的浏览器兼容性及解析问题,都是通过css hack的单独处理来解决,因此掌握好这些基本的css hack就能够解决大部分问题。在实际开发过程中,根据需要对浏览器进行单独处理的需求,提取单独的css hack或是组合应用这些css hack,就能够做到针对兼容性的单独处理。css hack针对Windows平台下两大系列浏览器的隐藏表  实际上针对这些css hack的使用以及浏览器隐藏表上,我们不难看出,针对这些css hack都无法在Mozilla/Firefox下提供样式隐藏。这也说明了一个问题:Mozilla/Firefox浏览器对CSS的支持相当完善,事实也是如此,Mozilla/Firefox是目前公认的对Web标准支持最完善的浏览器,开发时严格遵守W3c制定的各项Web标准规范,最终的产品如我们所见,对于Web标准的支持相当完善,以至于css hack都是针对IE系列浏览器的。尽管如此,由于历史及一些商业上的原因,Mozilla/Firefox至今未能成为主流浏览器,网络浏览的大片市场还是被IE所占据,当然这并不是表示IE绝对的差强人意,到目前为止,IE仍然是最方便使用的浏览器产品,而且在每一次升级过程中,我们也看到了IE对于Web标准的改进与提高,在即将推出的Windows Vista操作系统中我们将看到IE7的身影,相信Web标准在新的浏览器上会表现得更加出色。

附件附件:

您所在的用户组无法下载或查看附件

最后编辑线的两头 最后编辑于 2007-11-17 15:40:02
 

回复:常用css hack的用法。用css+div不能不知的方法啊。

不错``学习之中````
 

回复:常用css hack的用法。用css+div不能不知的方法啊。

不错:default6: :default6:
网站建设模板设计 
QQ 448172335  用心服务共创价值
 

回复:常用css hack的用法。用css+div不能不知的方法啊。

ffffffffffffffffffffffffffffff
网站建设模板设计 
QQ 448172335  用心服务共创价值
 

回复:常用css hack的用法。用css+div不能不知的方法啊。

最近正在学习~~谢谢提供.
选择酷源,不是选择的一个程序,而是选择的人,选择的一种精神。------ 我相信,我选择。
我的小站:
无心收藏 http://www.520ky.com
 
1  /  2  页   12 跳转

版权所有 酷源CMS政府信息公开平台   Sitemap

Powered by Discuz!NT 2.0.1214    Copyright © 2001-2008 Comsenz Inc. 蜀ICP备07500489号
返顶部