又见IE6吐槽~ 并行结构式class引起的bug

飞鱼 — Mon, 16 Aug 2010 12:29:04 +0000

这个bug 在以前写代码的时候就碰到过了，因为觉得碰到的几率不高，所以就忽略不计了。
现在又碰上了，就努力的分析了一下，然后共享出来，晒晒更健康。

先说一下历史背景：
最近看了太多架构式的书，写出来的样式都比较戳。比如: 提交成功的提示框会这么写。

div class = "msg-mod error" //html标签就省略了，自己YY ^__^

所有的信息提示框，用msg-mod 这个通用库来封装。然后改通用库包含了一些状态，如：error ，ok ，tip ，notice等来表现“错误，正确，提示，注意”等状态。
于是如果你想写一个输出的正确框就可以写成这样。

div class = "msg-mod ok"

这样做有什么好处呢，

1. 首先样式全局化，使用msg-mod 来全局控制，
2. 使用非常语义化的状态：error,ok ，来衍生出不同的样式(使用并行结构式方法来实现，后面会解释)。
3. 更适合功能的一些特性：有些时候需要使用js 动态的改变msg的样式，这样写出来的js 语义也更强，可读性也增强。

如何实现：

这个应该都清楚。我就一笔带过，贴个代码。

div.msg-mod{  //全局msg-mod 样式，并且有一种初始的样式，使用div开头，增加选择器效率。
    padding:5px 7px;
    border:1px solid #92e577;
    background-color:#eefbed;
}

然后通过结构式定义不同状态的样式，这种将两个class组合起来，并行定义的样式，我称之为并行结构式

div.msg-mod.error{  //error 状态
    border:1px solid #ff8c40;
    background-color:#fff5e6;
}
div.msg-mod.notice{           //notice 状态
    border:1px solid #ffcc7f;
    background-color:#ffffe5;
}

思维扩展：

这样的表现形式还能接受吧？那么我们继续扩展。比如：如果想给一些msg-mod 添加图片来增加视觉效果(如配图^__^)。
要想配图么，于是又给msg-mod 新加了个class属性 has-ico，当然有人会说：默认为什么不给所有msg-mod都配图，给没图的配上属性no-ico，嘎嘎随你~~~，因为后面还有，慢慢看下去就知道了。

div class = "msg-mod has-ico ok"
  h2  提交成功
  p   订单已成功递交，请进入我的订单查看订单状态。

如上面的代码当有大字的时候就使用大的ico图标，当只有小字的时候，使用小ico。(如配图=，=)
于是乎我又添加了个属性 has-sml-ico。

div class = "msg-mod has-sml-ico ok"
  p   订单已成功递交，请进入我的订单查看订单状态。

然后在css样式实现的时候又重现了这个IE6bug，就是IE6下用并行结构式实现不了大小图配置。

分析原因：

经过分析，发现原因是，IE6在解析并行结构式的时候会出现解析错乱现象。比如

div.msg-mod.notice.has-ico{  //notice 有has-ico 的时候显示notice 图标
     background:...
}
div.msg-mod.error.has-ico{  //error  有has-ico 的时候显示error 图标
     background:...
}

这个时候，非IE6情况下，都能够根据css 的结构来显示出想要的结果，但是IE6脑残了，就将其解析成。

div.msg-mod.has-ico{   //忽略了中间的class。
     background:...
}

这样IE6下就以最后一个样式来呈现has-ico的状态。有兴趣可以回家试试，oh yah。

div.msg-mod.error.has-ico{  //error  有has-ico 的时候显示error 图标
     background:...
}

当然有人会说：那把结构式换成 div.msg-mod.has-ico.error试试。
经过尝试，IE6同样会忽略掉中间的class，解析成div.msg-mod.error囧rz~~~~

然后就无解。 ··· 折腾了好久，终于放弃了。然后想了另外的情况来解决。

解决方法：

导致样式错乱的原因初步定位为：3层class 并行结构式会忽略中间的class，(或者说忽略掉第一个也可能，具体我没有深入研究)
解决办法很简单，当然跟解决IE6的其他办法一样，能避开就避开，用其他方式来实现。
于是乎，重新整理了代码思路，整理如下：
既然并行结构式会导致bug，那么不并行的结构式会有问题么？
我将图片的实现放在子标签h2 上来实现，问题就解决了。如下：

div.msg-mod.error.has-ico h2{
     background:...
}

得出结论，使用非并行结构式样式在IE6下有解。·· oh yah。
不过以上代码还有些bug，这样会对msg-mod 下的所有h2 都增加了图标，于是这样优化了一下。

div.msg-mod.has-ico{
    padding-left:42px;
}
div.msg-mod.has-ico h2.ico{
    margin-left:-37px;
}
div.msg-mod h2.ico{
    padding:7px 5px 10px 37px;
}
div.msg-mod.error h2.ico{
     background:...
}

这样这样实现，通过给msg-mod添加has-ico 属性给内容增加左侧留白(多行的时候)。通过给h2添加ico样式来添加图标。当然单行时候也可以不用加ico，但是根据语义化，还是加上会happy 点。
同样实现小图的时候就添加 has-sml-ico属性，在标签p上添加ico 样式。代码如下：

div.msg-mod.has-sml-ico{
    padding-left:30px;
}
div.msg-mod.has-sml-ico p.ico{
    margin-left:-25px;
}
div.msg-mod p.ico{
    padding:0 5px 0 20px;
}
div.msg-mod.notice p.ico{
     background:...
}

这样，有效的避免了并行结构式带来的错乱压力~~~~ 万恶的IE6丫~~~~
这样处理有利有弊啦··。
就是必须要在里面的标签上多加一个ico 的样式。

其他目前还没有碰到什么问题。欢迎反馈~~·

您可能还对这些日志感兴趣

IE6下PNG图片背景不透明的问题

飞鱼 — Sun, 10 Aug 2008 12:00:14 +0000

周末调试的时候，发现之前的ie6下显示png代码不够完善，于是上网转了篇详细的，一起学习。

CSS解决IE6下PNG图片背景不透明的问题

使用IE6的滤镜来解决

background: url(你的图.png)  no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’你的图.png’); /* IE6  注意这里的png路径最好是绝对路径，因为它是相对于调用的html页面的路径，而不是css目录的相对路径 */
_background-image: none;

JS解决IE6下PNG图片不透明的问题

背景png图片可以使用css来解决，如果是img 标签的图片，我则是用js来实现，也比较简单。
以下是网上流行的pngfix.js的代码。下载地址


function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1]);
  if ((version >= 5.5) && (document.body.filters)) {
    for(var j=0; j" ;
         img.outerHTML = strNewHTML
       j = j-1 ;
     }
   }
 }
}
window.attachEvent && window.attachEvent("onload", correctPNG);

===========补充==========

jQuery插件解决IE6下PNG图片不透明的问题

1.插件下载地址
Download jQuery
Download pngFix.zip jquery.pngFix.js
2.使用方法




  $(document).ready(function(){
  $(document).pngFix();
});

飞鱼 ^_^ 浆抱罗斯‘s blog » ie6

又见IE6吐槽~ 并行结构式class引起的bug

如何实现：

思维扩展：

分析原因：

解决方法：

您可能还对这些日志感兴趣

IE6下PNG图片背景不透明的问题

CSS解决IE6下PNG图片背景不透明的问题

JS解决IE6下PNG图片不透明的问题

jQuery插件解决IE6下PNG图片不透明的问题

您可能还对这些日志感兴趣