IE 8 でこのページを見てください: http://labs.pieterdedecker.be/hetoog/layout.htm
最初は問題ないように見えますが、アイテムの上にカーソルを置いてから、マウスをアイテム グリッドから離してみてください。
前
後
黄色のアイテムの右側に黒い境界線があることに注目してください。また、フォントの見え方も異なります。
どうすればこれを修正できますか?
IE 8 でこのページを見てください: http://labs.pieterdedecker.be/hetoog/layout.htm
最初は問題ないように見えますが、アイテムの上にカーソルを置いてから、マウスをアイテム グリッドから離してみてください。
前
後
黄色のアイテムの右側に黒い境界線があることに注目してください。また、フォントの見え方も異なります。
どうすればこれを修正できますか?
テーブルベースのレイアウトが原因であることにすべてのお金をかけます...代わりにDIVを使用してみてください。
すべてのテーブル/セルをdivに置き換える大まかな例を次に示します。
IE8でテストすると、変更の問題が発生しなくなったことがわかります...
CSS で table.grid に割り当てられた table-layout:fixed プロパティを削除してみてください。IE8 でバグを引き起こす可能性がある場所を読みました。(各 td に幅を割り当てているように見えるので、不要なはずです。)
余談ですが、将来、物事を複数のクラスに分割する方法を検討する必要があります。try の代わりに、td.brownnote、td.greennote、...{} の代わりに td.note{} のような CSS を記述できます。