当border颜色透明时……
最近我又发现了一处细节上的CSS兼容性问题——当盒模型中的border颜色设置为透明时在各浏览器下表现出了完全不同的样式，甚至显得有些诡异，具体请看我下边的测试：
首先给出代码，HTML代码如下：
<body>
<div class="test">
内容内容内容内容
内容内容内容内容内容
内容内容内容内容
内容内容内容内容内容
内容内容内容内容
内容内容内容内容内容
</div>
</body>对应的样式代码有两份，不同之处就是对div.test的背景分别定义了不重复与重复：
body { background:#fff url(bg.jpg) repeat 0 0; }
.test {
width:200px;
height:200px;
margin:10px;
color:#f00;
background:#000 url(mingelz.jpg) no-repeat 0 0; /*测试1*/
background:#000 url(mingelz.jpg) repeat 0 0; /*测试2*/
border:30px solid transparent;
}首先我们看一下在Firefox、Chrome、Opera、Safari等符合Web标准的浏览器下这段代码的解析效果：
FF下背景不重复时的效果
FF下背景重复时的效果
可以看到，当div的背景不重复时，在这些浏览器中边框颜色显示为黑色，也就是所在div的背景色，而背景图片的起始位置为内容区域的左上角。而当div背景定义为重复时，我们透过透明的边框看到了这个div的背景图片，此时背景图片的起始位置仍然是内容区域的左上角，只不过所影响的范围延伸到了边框所在的区域。看来在这些浏览器下盒模型的border是在background之上的，只有margin是background无法涉足的区域。
下边来看一下这段代码在IE7/8下的效果：
IE7/8下背景不重复时的效果
IE7/8下背景重复时的效果
可以看到，在IE7/8下这个div的边框真的透明了，我们看到了body的背景，就像定义的是margin一样。不过在实际测试中，我发现IE7下对于border解析有另外一个bug——当用鼠标选中div的内容时，就会出现诡异的一幕，而且对于所在div背景是否重复也会影响这诡异情景的不同表现：
IE7下背景不重复时的诡异效果1
IE7下背景不重复时的诡异效果2
IE7下背景重复时的诡异效果，只此一种
对于这个现象，恕我才疏学浅，不知如何解释……还好IE8已经不存在这一问题了。
最后我们再来看看IE5.5/6的表现（因为IE5.5对width定义的区域与其他浏览器不同，我对此做了hack以保证他们最后的显示效果是一致的）：
IE6下背景不重复时的效果
IE6下背景重复时的效果
看到没，红色，边框的颜色竟然…竟然继承了div内容的颜色，无语了……
。完了，我已经看不懂了。。
不过，我明白了一点。。。
那就是IE很不靠谱。
@启行
IE不靠谱主要是因为每个版本对于同一行代码的解析会出现很大的差别，这使得页面开发人员总是要考虑自己的页面在不同IE版本下的表现是否一致。如果IE能做到像FF那些，版本升级但页面解析一致，估计也不会有那么多骂声了~
呵呵。。我都有点看不明白 了。。。。汗。。。
IE6- 不支持透明边框，所以 “transparent” 被直接忽略。而当边框颜色未指定时，取文本颜色。所以就是那样了。
受教！任何一个问题深挖的时候，都感觉到自己的知识依旧肤浅。
图片有问题吗？
呃……是的，picasaweb被挡在国门之外了，我博客内容中基本所有图片都外链的picasaweb，所以比较受伤。