为什么Internet Explorer不能顺利渲染此页面？

Question

在IE 8中查看此页面： http://labs.pieterdedecker.be/hetoog/layout.htm

一开始看起来没问题，但请尝试将鼠标悬停在某个项目上，然后再将鼠标从项目网格上移开。

之前

后

注意黄色项目右侧是否有黑色边框。此外，字体看起来不同。

我该如何解决这个问题？

Answer 1

我会把所有的钱都放在这是由于你的基于表格的布局...尝试使用DIV代替。

这是用div替换所有表格/单元格的粗略示例：

http://jsbin.com/akido/

在IE8中测试它，你会发现你不再有改变的问题......

Answer 2

你应该尝试删除CSS中分配给table.grid的table-layout：fixed属性，我读到了可能导致IE8中的bug的地方。 （应该是不必要的，因为看起来你已经为每个td分配了宽度。）

顺便说一句，你应该考虑在将来使用更多的东西分成多个班级。而不是尝试这样，你可以写像td.note {}而不是td.brownnote，td.greennote，... {}