首页 > 教程 > 关键词  > CSS最新资讯  > 正文

条件CSS的使用

2009-03-12 17:06 · 稿源:前端观察

介绍

毫无疑问,任何一个试图使用 CSS 的网页设计师和开发人员都会发现不同的浏览器要求不同的样式声明。这些烦恼归咎于各浏览器及其各版本不同程度的 CSS 执行的完整性。条件 CSS 是这个问题的一个解决方案,采用的是 Internet Explorer 的条件注释语法的思想,并把它内联到 CSS 声明之中。

基本用法

条件 CSS 主要用于指出一个特别的 CSS 声明是不是应该用于一个特别的浏览器。当然你不希望经常这么做,但是当你需要针对一个浏览器的时候,它会非常有用。可以在U4EA支持列表里看到,大部分的浏览器都支持这种方式。

任意 CSS 声明或者块都可以添加条件声明前缀,这些前缀有3种基本类型:

[if {!} browser]

[if {!} browser version]

[if {!} condition browser version]

! - 声明的否定 (例 NOT) - 可选

browser - 声明针对的浏览器

‘IE’ - Internet Explorer

‘Gecko’ - Gecko 核心的浏览器 (Firefox, Camino 等)

‘Webkit’ - Webkit 核心的浏览器 (Safari, Shiira 等)

‘SafMob’ - 移动版 Safari (iPhone / iPod Touch)

‘Opera’ - Opera 的浏览器

‘IEMac’ - Mac 版本的 Internet Explorer

‘Konq’ - Konqueror

‘IEmob’ - 移动版 IE

‘PSP’ - Playstation Portable

‘NetF’ - Net Front(恕糖伴西红柿无知,不知道这是啥东东)

version - 要针对的浏览器版本

condition - 算术符

lt - 小于

lte - 小于等于

eq - 等于

gte - 大于等于

gt - 大于

一些条件声明的例子:

// 条件-CSS 语法实例  

[if IE] - 如果浏览器是 IE  

[if ! Opera] - 如果浏览器不是 Opera  

[if IE 5] - 如果浏览器是 IE 5  

[if lte IE 6] - 如果浏览器是 IE 6 或者更低版本 (IE 5, IE 4 等)  

[if ! gt IE 6] - 和上面的声明等效, 如果浏览器版本不高于 IE 6

因为许多实例认为 div 是具有 width 和 padding 的盒类。因此它也应该在 IE 5 中表现正常(我发现很多人已经放弃支持 IE 5了,但这是一个经典例子)。IE 5的盒模型不标准,因此这就是使用条件 CSS 解决的方法:

// 条件 CSS 盒模型例子 
 
div.box {  

    width: 400px;  
   
    [if IE 5] width: 600px;  
   
    padding: 0 100px;  
}

像你所看到的,条件 CSS 使得你可以只维护一个 CSS 文件,而不是好几个需要用到 IE 的条件注释的文件。这有助于流线型维护,也使得代码更加清晰。

再进一步,条件 CSS 的一个重要特性是当它发现一条 @import CSS 声明时,它会自动打开并插入需要导入的文件。这样就减少了页面的加载时间,因为浏览器只需要对 CSS 文件做出一条 HTTP 请求。

尽管条件 CSS 大多用于针对不同版本的 IE 浏览器,当你在别的浏览器碰到很难修正的 bug(主要使用 Javascript 修正) 的时候,条件 CSS 也是相当有用的。例子包括了缺少 ‘display: inline-block’ 支持的 Firefox 2 和 Safari 2 中的 背景图片 bug。这些 bug 在这些浏览器的最新版本里面已经修正了,但是当这些浏览器占有一定市场份额的时候,向后兼容就很重要了。

举报

  • 相关推荐
  • Razer(雷蛇)在新加坡设立AI CENTER OF EXCELLENCE,加速人工智能投资布局

    雷蛇宣布在新加坡设立全球AI卓越中心,并计划在欧洲和美国建立类似机构,推动游戏与开发者工具领域的创新。新加坡中心将招聘150名AI工程师,专注于下一代AI游戏技术研发。雷蛇还推出AI工具套件,包括Game Co-AI和QA Co-AI,帮助开发者提升游戏质量和开发效率。该战略布局正值全球游戏市场快速增长期,预计2033年AI游戏市场规模将达280亿美元。新加坡数字产业发展局表示,此举将巩固该国作为区域AI创新中心的地位。

  • Checkout.com携手Visa推出发卡业务 (Card Issuing)

    Checkout.com与Visa达成战略合作,在英国及欧洲地区推出全方位发卡业务。通过Visa全球支付网络,商户可即时获取收款资金用于支付供应商款项,显著提升资金使用效率。该合作特别针对旅游业企业,解决其支付流程分散、资金周转慢的痛点。Checkout.com每年处理数千亿交易的技术能力与Visa网络结合,帮助商户消除预存资金需求,优化现金流管理。双方表示这将大幅提升欧洲商户运营效率,释放增长潜力。

  • SSD Fans评测:忆联消费级SSD AM541|强性能 高可靠 长守护

    国内知名技术社区SSD Fans对忆联消费级SSD AM541进行了深度评测。这款PCIe4.0固态硬盘采用3D NAND闪存颗粒和最新主控芯片,1TB版本顺序读取速度达7143MB/s,写入6037MB/s,远超标称值。评测显示AM541在性能、压力测试和可靠性方面表现优异,采用无缓存DRAM-Less设计配合智能SLC缓存机制,在CDM、SNIA标准测试中均展现业界领先水平。游戏实测《FF14》加载仅7.445秒,《黑神话:悟空》启动快40%,充分满足消费级用户对高性能存储的需求,展现了忆联在存储领域的技术实力。

  • 努比亚布局游戏二次元,携手洛天依亮相ChinaJoy2025

    8月1日,第22届中国国际数码互动娱乐展览会(ChinaJoy)在上海开幕。中兴通讯终端品牌努比亚与B站虚拟歌手洛天依合作,打造"次元穿梭站"主题展区,通过科技与二次元IP跨界融合,为Z世代带来创新体验。现场设置跨次元合影区,观众可与虚拟偶像互动拍照。红魔电竞宇宙展区则呈现多款电竞装备及新品体验,包括《鸣潮》等热门游戏试玩。中兴通讯表示,此次合作是布局游戏二次元市场的重要举措,将持续通过AI创新和年轻文化驱动,拓展智能终端发展空间。

  • AI原生游戏与跨境算力布局,游族网络在WAIC 2025展现新蓝图

    2025世界人工智能大会(WAIC)上,游族网络展示了其向"AI驱动型互动娱乐科技公司"转型的战略布局。公司首次公开正在研发的《三体》正版IP游戏《我的三体:2277》,将其定义为"AI原生游戏",强调AI不仅是研发工具,更是玩家参与内容创作的重要元素。此外,游族网络通过与曦智科技、长城科技等企业达成算力安全合作,构建"国产算力+密态安全+场景创新"三位一体的自主可控算力安全底座。公司还当选上海人工智能行业协会副会长单位,并入选"语料风云榜"转型典范TOP10,展现其在AI技术标准制定和跨行业资源整合方面的布局。

  • 苹果宣布美国制造计划:投6000亿美元布局

    近日,苹果公司首席执行官库克在社交平台发布重磅消息,苹果公司决定在未来四年内大幅扩大对美国的投资规模,总额将攀升至6000亿美元,并同步启动“全新的美国制造业计划”。此举不仅将为美国创造大量就业岗位,还将有力推动先进制造业在美国本土的发展。 今年早些时候,苹果公司就已许下承诺,未来四年内在美国投入5000亿美元用于布局美国制造产业。如今,公司�

  • 全球化布局多点爆发,泡泡玛特海外业务收入突破50亿

    泡泡玛特2024年财报显示全年营收130.4亿元,同比增长106.9%,净利润34亿元增长185.9%。海外及港澳台业务收入50.7亿元,同比暴涨375.2%,占总营收38.9%,其中东南亚市场表现最突出(营收24亿,占比47.4%,增速619.1%)。全年新增130家门店(含合营),机器人商店达192台。品牌通过开设越南、印尼等五国首店,入驻巴黎卢浮宫等国际地标,持续强化全球影响力。线上渠道收入14.6亿元,增长834%,其中TikTok渠道增速达5779.8%。泡泡玛特通过"IP生态+全球化"战略,正成为跨文化交流的新符号。

  • 智造实力赢得世界信赖 王力安防成功布局全球市场

    王力在全球安防市场的竞争力获得国际认可。今年5月,哈萨克斯坦住房公共事业和建设委员会主席率团考察永康王力总部,随后波兰客商考察团也到访。这些国际考察团对王力智能生产线印象深刻,其安全门生产周期从7天缩短至1天,产能提升300%。王力通过获得UL、BS等国际认证,成功打入高端市场。其位于永康的"未来工厂"占地23万平方米,整合5G与工业互联网技术,将186道工序重构为16个智能工作岛,每7.68秒完成一樘安全门组装。在焊接、涂装等环节实现工艺突破,产品远销欧美等地区。王力以智能制造为核心,持续引领行业创新,为中国智造贡献标杆力量。

  • 前方突然让路不要得意要警惕!雷军:这驾驶技巧很重要

    今天下午,小米创办人雷军分享了小米精英驾驶高阶驾驶培训的安全驾驶指南。 这份指南介绍了一则驾驶技巧,在车流中行驶,前车突然让路,大概率是因为前方有需要躲避的物体或者人,小心观察前方情况,注意保持前后车距,找准机会变道脱险。雷军强调,这个驾驶技巧很重要。 据了解,小米精英驾驶高阶驾驶培训项目旨在通过系统化教学提升用户的实际驾驶操控能力�

  • 海乐行国际联会与乌尔巴冶金厂携手布局核燃料产业链

    2025年7月,在第六届"一带一路"国际合作高峰论坛期间,中国海乐行国际联合会与哈萨克斯坦国家原子能工业公司旗下的乌尔巴冶金厂(UMP)签署核燃料制造合作协议。双方将在燃料组件认证、产能提升、人才培养、技术研发等领域展开深度合作,并计划建立联合培训中心。此次合作标志着中哈两国在核能高端制造领域迈入新阶段,将共同探索绿色低碳发展路径,为"一带一路"沿线国家核能建设提供稳定供应链。UMP拥有70年核材料生产经验,其产品已成功应用于中国多个核电项目。