IE CSS Bug系列:32样式限制

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的 @rubyisapm 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

—————————————————————————–

32样式限制

受影响的版本

IE6IE7IE8(译者注:在IE9中切换浏览器版本为789均出现此bug,在IE11中切换浏览器版本均没有出现该bug,这个…..仅供参考)

 

表现

排在第32个(及之后的)样式会被忽略(例如<style><link>@import

教程日期

2009 8.12 14:58:58 星期三

描述

如果你正在维护一个网站,里面包含了很多第三方的广告或应用程序,这些第三方的东西会依赖于他们自己的<style>(<link>)元素,本文中的bug就会令你抓狂…..我这里说的很多意思是32个。让我们来看看下面的演示,然后我再解释。

 

演示

由于该bug的天然特性,这个演示在一个单独的页面上:

HTML Code

 

首先,尽管我在示例中用了32个<style>元素,<link>元素和表单中链接的@import url()一样会受到这个限制的影响;所有这些元素可以叠加产生32个style的限额(虽然@import的极限貌似是35)。(译者注:据自测,@import形式的引入样式限制也是32

在演示中,第32<style>元素设置了<p>元素的边框,在IE中,除非你删掉这个之前的某些<style>元素,不然P元素是不会被设置边框的。

 

解决方案

以下是针对此bug的解决方案

方案(伪bug)

 

教程日期

2009 8.12 15:28:11 周三

 

修复版本

所有受影响的版本

描述

如果你在实际网站开发中遇到了这个问题,你也许不能选择用“更少的样式标签”,解决方案可能会变得更复杂。基于那个事实,在修正的演示中,我会展示达到限制条件的情况:

 

由于该bug的天然特性,这个演示在一个单独的页面上:(译者注:此处的页面链接有错误,跟前一个演示链接是一样的,明显和下面的html代码不符)

HTML 代码:

如果你不能采取“使用更少的样式标签”的解决办法,问题就会变得更复杂。最好的方案就是采用一个后处理,将超量的样式进行合并放入一个style里(如将多个<style>元素中的样式放入一个<style>元素中)。

如果<style>元素中的内容是静态的,你可以简单地复制代码并将它放在限制标签前面的<link>/<style>元素中。

如果你已经火烧眉毛,需要一个快速修复方法的话,下面是我在the page where I found the bug找到的一段jQuery代码,我没有测试过这段代码,所以使用者风险自负哦~代码是这样的:

 

请注意,你不应使用这段代码作为此问题的永久性修复方案。

收藏 评论

关于作者:rubyisapm

前端程序媛…(新浪微博:@rubyisapm) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部