Buggy tables HTML dans IE7, aide?

J'ai le code suivant:Buggy tables HTML dans IE7, aide?

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      .tl, .tr, .bl, .br, .b, .t { 
       background: #f00; 
       width: 16px; 
       height: 16px; 
      } 

      .m { 
       background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0; 
      } 

      table { 
       width: 512px; 
       height: 512px; 
       border-spacing: 0px; 
       border-collapse: collapse; 
       table-layout: fixed; 
      } 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td class="tl">&nbsp;</td> 
       <td class="t">&nbsp;</td> 
       <td class="tr">&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td class="m">test</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="bl">&nbsp;</td> 
       <td class="b">&nbsp;</td> 
       <td class="br">&nbsp;</td> 
      </tr> 
     </table> 
    </body> 
</html>

Il fonctionne bien aussi longtemps que je ne regarde pas avec IE7. IE7 pour une raison quelconque ne respecte pas ma largeur et la hauteur définie à 16px et fait à la place toutes les lignes et colonnes pour prendre la taille moyenne. Bizarrement, cela fonctionne dans le mode Quirks, mais maintenant en mode standard, quoi de neuf?

P.S. Existe-t-il un autre moyen de réaliser une mise en page similaire avec des coins de 16x16, 16px haut et bas tandis que le milieu s'intègre?

Source

2010-11-06 Tower

donner height:100%; pour .m

Source

2010-11-06 14:11:47 Sotiris

Il devient trop grand ... – Tower

modifier la valeur de la hauteur pour répondre à vos besoins – Sotiris

Essayez de donner à chaque cellule une partie du contenu:

<td class="tl">&nbsp;</td>

qui devrait corriger.

Source

2010-11-06 12:57:49

Cela n'a pas aidé. Rien n'est différent. :/ – Tower

@rFactor sur deuxième coup d'oeil, cela ne peut pas fonctionner parce que la largeur totale de la table est plus de 3 x 16 pixels, peut-il »? –

border-spacing et border-collapse ne sont pas pris en charge dans IE7 et ci-dessous. Essayez d'utiliser

<table cellspacing="0" cellpadding="0">

Mise à jour:

Je n'ai pas IE7 ni IE6 ici, donc c'est juste une supposition: essayez de régler la largeur et la hauteur de .M automatique. Si cela ne fonctionne pas (? Car ce serait trop facile, à droite :)), vous pouvez définir les dimensions manuellement 480px (512 - 2 * 16)

Source

2010-11-06 13:29:09

Aucun changement. Ne fonctionne toujours pas. :/ – Tower

Ce paramètre 'auto' n'a pas fonctionné non plus. Donc, je suppose que ma seule chance de le faire fonctionner dans IE 7 est de calculer la hauteur par moi-même? – Tower

@rFactor Vous pouvez essayer les scripts ie7.js qui résolvent les problèmes dans IE7 et d'autres versions de IE ... –

Essayez ceci:

<style> 
      table { 
      width: 512px; 
      border-spacing: 0px; 
      border-collapse: collapse; 
      table-layout: fixed; 
     } 
     table .m 
     { 
      background: url('https://www.google.com/images/logos/ssl_logo_lg.gif') #0f0; 
      height: 512px; 
     } 
     .tl, .tr, .bl, .br, .b, .t { 
      background: #f00; 
      width: 16px; 
      height: 16px; 

     } 


    </style>

Source

2010-11-06 16:04:20 mikel

Est-ce que cela ne fonctionnait pas alors? Cela semblait correct quand je l'ai testé dans IE7 ici au moins. – mikel

Répondre

Questions connexes