作者：Tony Qu

 

Bug重现

这里我引用了我同事流星陨落的例子。

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style>
.table1
{
    border-collapse:collapse;
}
 .table1 th {
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=white, endColorstr=gray)";
   border:1px solid red;
 }
style>
head>

<body>

<table class="table1">
<tr>
<th>Give me a borderth>
<th>Give me a borderth>
tr>
table>

body>
html>

重现环境：IE8, Browser Mode: IE8, Document Mode: IE8 Standard

image

正确的效果：

image

问题描述：

a.上面、左边和单元格中间的边框不应该看不见。

b. 这个问题与border-collapse属性没有关系，即使去掉border-collapse，也是没有边框的。

 

解决方案

我看了我同事发的帖子，http://space.cnblogs.com/question/9322/，邀月同学给出了他的回复，在此表示感谢。不过position:absolute似乎并不是一个很好的解决方案，至少对于我们公司的系统是这样的，因为我们公司的table会有最多300列，如果每一列都要给一个新样式，那就有些小题大做了。更何况我们的列要支持宽度可变、拖放等功能，所以这种方法并不推荐。

但邀月的方法给了我点启发，既然position不行，float也许能行，于是早上拿float:left试了一把，居然可以，修正代码如下：

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style>
.table1
{
    border-collapse:collapse;
}
 .table1 th {
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=white, endColorstr=gray)";
  border-left:1px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
  border-right:none;
  float:left;
 }
 .table1 th.last
 {
     border-right:1px solid red;
 }
style>
head>

<body>

<table class="table1">
<tr>
<th>Give me a borderth>
<th class="last">Give me a borderth>
tr>
table>

body>
html>

说明：

a. 这里我之所以加上th.last样式，是因为这时的border失去了border-collapse的功能，所以位于单元格之间的border会产生2px的粗线，这样会很难看，QA也不会放过这样明显的bug。所以觉得采用border-right:none，然后在最后一个单元格补上一个border-right:1px solid red。当然这样做的代价是对于所有table的TH我都必须去遍历到最后一个元素，然后把那个元素加上last样式。

b. 有人也许会问，你为啥不用th:last-child，其实我一开始是想用这个，结果所有的IE均不支持这个属性，无奈放弃。

c. 也有人提出了另外一种解决方法，即用background-image，没错，background-image确实可以解决这个问题，但很遗憾，我们公司的产品要求允许客户使用任意2种颜色换肤，如果采用生成图片的方案，将会产生大量的图片，更何况，我们有些table的header高度是随机的，到底该生成多高的渐变色又是一个令人头疼的问题。

注：如果你有更好的方法，请告诉我，最好连float都不用，呵呵，先谢了

我的一些看法

很多时候，微软产品会出现很多很诡异的现象，比如说蓝屏，但是蓝屏的case在大多数情况下是由于第三方的驱动引起的，所以我们不该怪微软，只能说她的驱动架构还无法很好的限制第三方驱动程序开发人员的行为。

但IE8的这个bug我觉得有些太容易重现了，而且我在网上也看到了Beta RC1时就有人发了询问帖（http://www.eggheadcafe.com/software/aspnet/34097060/ie8-rc1-bug-th-loses-bor.aspx），可偏偏微软的SDET没有发现，或者是SDE嫌烦不愿意修，不管哪一种原因，作为一个市场占有率极高的产品，这种bug实在有些说不过去。如果微软的同仁看到这篇帖子，麻烦转给相关人员，最好能够直接forward给IE team的SDE Lead，希望这个bug能够在sp1中修复。

在IE8发布之前，IE8的主管曾经声称IE8不完全支持W3C标准，我当时以为只是少量的问题、少量的不支持，但从这个bug来看，这句话看来很有内涵，这其中也包括了很多没有修复的bug所导致的“不标准”情况。前段时间也看了Gerard Talbot整理的IE8 Bug列表，看完这列表，恐怕你对IE8会有另外一种想法——全力抵制。回头看微软ie8的发布，也许是怕被Firefox赶上，提前发布了IE8，结果导致了一堆没有修复的bug也随之延后到sp1才能修复，当然这只是我的猜测，真正的原因只有IE team知道。

 

最后提一下IE8最让人失望的东西：

a. 放弃对canvas的支持，要求ie team提供支持的投票人数 70人

https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334060

b. 放弃对VML的支持，要求ie team提供支持的投票人数投票人数23人

https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333905

c. 放弃对SVG的支持，要求ie team提供支持的投票人数投票人数27人

https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333795

这也就意味着，IE8没有提供任何可以在浏览器中画矢量图的东西，结果微软说你可以考虑用Silverlight，哎，拿这种回答来回避其浏览器的不足，实在让人无语。客户买我的产品，我还得要求客户安装Silverlight插件，那如果他没有装或者没法装咋办？难道我和客户说那我们也没有办法，要不你换其他公司的产品？老板不杀了我才怪！