时间: 2008-05-17 / 分类: WEB后端编程 - 开发与实践 / 浏览次数: / 0 个评论 发表评论
CSS样式表在不同媒介不同浏览器上的设置显示
黄金分割与摄影构图
项目前端开发的架构
12条经典摄影技巧
CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF

CSS在不同媒介上的显示方法:

常见的浏览器端的样式设置为:<link rel=”stylesheet” type=”text/” href=”//screen.” media=”screen” />

为打印机的样式设置为:<link rel=”stylesheet” type=”text/css” href=”/css/print.css” media=”print” />

主要区别在于media的不同定义,下面是主要的不同的媒体类型表:

all
用于所有设备

aural
用于语音和声音合成器

braille
用于盲人使用的触觉反应设备

embossed
用于盲人打印机

handheld
用于掌上设备或更小的装置,如PDA和小型电话

print
用于打印机和打印预览

projection
用于投影设备

screen
用于色彩监控器

tty
用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备

tv
用于电视和网络电视

用@media也可以直接在同一样式表中,为不同的显示媒体来定义不同的媒体类型和显示效果:

@meida print{

body{ css code}

}

@meida screen{

body{ css code}

}

CSS在不同浏览器端的显示

区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
主要用*和!important来区别一下几个主流浏览器之间的细微差别:
IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6支持下划线,IE7和firefox均不支持下划线。
如下:

 IE6IE7FF
*×
!important×
_××

 

例子如下:
#demo{
background:orange;
*background:blue;
}
区别IE6与IE7:
#demo{
background:green !important;
background:blue;
}
区别IE7与FF:
#demo{
background:orange;
*background:green;
}
区别FF,IE7,IE6:
#demo{
background:orange;
*background:green !important;
*background:blue;
}
区别IE6与IE7,FF之外

 

#demo{
background:orange;
_background:green !important;
_background:blue;
}

 

备注一点:不同浏览器CSS书写的顺序都应该是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
      站点地图 | 关于我 | 返回顶部
    Copyright © 2001-2013 { amiku.cn | zhangshunjin.com }. Powered by 

    阿米酷

    张顺金


    浙ICP备11002820号-1