一个IE8 Bug的解决方法以及一些思考.docxVIP

一个IE8 Bug的解决方法以及一些思考Bug重现这里我引用了我同事流星陨落的例子。!DOCTYPEHTMLPUBLIC-//W3C//DTD HTML 4.01//EN/TR/html4/strict.dtdhtmlheadstyle.table1{ border-collapse:collapse;} .table1 th { -ms-filter:progid:DXImageTransform.Microsoft.gradient(enabled=true,startColorstr=white, endColorstr=gray); border:1px solid red; }/style/headbodytableclass=table1trthGive me a border/ththGive me a border/th/tr/table/body/html重现环境：IE8, Browser Mode: IE8, Document Mode: IE8 Standard正确的效果：问题描述：a.上面、左边和单元格中间的边框不应该看不见。b. 这个问题与border-collapse属性没有关系，即使去掉border-collapse，也是没有边框的。?解决方案我看了我同事发的帖子，/question/9322/，邀月同学给出了他的回复，在此表示感谢。不过position:absolute似乎并不是一个很好的解决方案，至少对于我们公司的系统是这样的，因为我们公司的table会有最多300列，如果每一列都要给一个新样式，那就有些小题大做了。更何况我们的列要支持宽度可变、拖放等功能，所以这种方法并不推荐。但邀月的方法给了我点启发，既然position不行，float也许能行，于是早上拿float:left试了一把，居然可以，修正代码如下：!DOCTYPEHTMLPUBLIC-//W3C//DTD HTML 4.01//EN/TR/html4/strict.dtdhtmlheadstyle.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/headbodytableclass=table1trthGive me a border/ththclass=lastGive me a border/th/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时就有人发了询问帖（/software/aspnetie8-rc1-bug-th-loses-bor.as