作者：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 border</th> <th>Give me a border</th> </tr> </table> </body> </html>
重現環境：IE8, Browser Mode: IE8, Document Mode: IE8 Standard
正確的效果：
問題描述：
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 border</th> <th class="last">Give 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時就有人發了詢問帖（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插件，那如果他沒有裝或者沒法裝咋辦？難道我和客戶說那我們也沒有辦法，要不你換其他公司的產品？老闆不殺了我纔怪！