Pourquoi Internet Explorer ne rend pas cette page correctement?

Question

Jetez un oeil à cette page dans IE 8: http://labs.pieterdedecker.be/hetoog/layout.htm

Il a l'air bien au début, mais essayer planant au-dessus d'un élément, puis en prenant votre souris hors de la grille de l'élément nouveau.

Avant

Before http://img189.imageshack.us/img189/9638/beforeri.jpg

Après

After http://img338.imageshack.us/img338/6395/afteri.jpg

Remarquez comment il y a une bordure noire à droite de l'élément jaune. En outre, la police est différente.

Comment puis-je résoudre ce problème?

Answer 1

Je mettrais tout mon argent sur le fait que c'est en raison de votre mise en page basée sur la table ... essayez d'utiliser DIVs à la place.

est ici un exemple grossier de remplacer toutes vos tables/cellules avec divs:

http://jsbin.com/akido/

essai dans IE8 et vous verrez que vous n'avez plus la question altérant ...

Answer 2

Vous devriez essayer de supprimer la table-layout: la propriété fixe assignée à table.grid dans votre CSS, j'ai lu quelque part qui peut causer des bugs dans IE8. (Cela ne devrait pas être nécessaire car il semble que vous ayez assigné des largeurs à chaque td.)

En aparté, vous devriez vraiment envisager d'utiliser plus de choses dans plus d'une classe à l'avenir. Au lieu d'essayer, vous pouvez écrire CSS comme td.note {} au lieu de td.brownnote, td.greennote, ... {}