Problèmes de tableau avec WebKit

Question

Je n'arrive pas à afficher ce code correctement dans les navigateurs WebKit (chrome/safari). Il semble bien dans IE6, IE7 et FireFox.

<table width="100%"> 
    <tr> 
     <td rowspan="2" style="vertical-align:middle;"> 
      <a href="http://http://{$smarty.const.DOMAIN}/company/a_cherry_on_top/line/gift_cards/?v=s2"><img src="/i/thumbnails/acotgc25sm.gif" alt="Gift Certificate"/></a> 
     </td> 

     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/article?a=2044" target="_top">Wishlist</a> 
     </td> 
     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/article?a=2125" target="_top">Link to Us</a> 
     </td> 
     <td style="vertical-align:middle;"> 
      <a href="http://www.shareasale.com/shareasale.cfm?merchantID=8362" target="_blank">Affiliate Program</a> 
     </td> 
     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/article?a=1521" target="_top">Privacy</a> 
     </td> 
     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/article?a=1395" target="_top">Guarantee</a> 
     </td> 

     <td rowspan="2" style="width:160px;"> 
      <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script> 
     </td> 
    </tr> 
    <tr> 
     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/article?a=3069" target="_top">About Us</a> 
     </td> 
     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/article?a=1467" target="_top">Shipping</a> 
     </td> 
     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/article?a=12342383" target="_top">Why Buy From Us</a> 
     </td> 
     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/article?a=1397" target="_top">Contact Us</a> 
     </td> 
     <td style="vertical-align:middle;"> 
      <a href="http://{$smarty.const.DOMAIN}/help" target="_top">Help</a> 
     </td> 
    </tr> 
</table> 

Le problème est que WebKit rend la rangée supérieure très petite et la rangée inférieure de remplir le reste de l'espace à la place de chaque rangée ayant une hauteur égale.

Quelqu'un a-t-il des idées sur la façon de le faire apparaître comme je le souhaite dans les navigateurs basés sur WebKit?

Answer 1

Je pourrais aider plus avec un exemple vivant pour tester mais vous pourriez essayer d'ajouter ceci à vos étiquettes tr.

<tr style="height: 50%;"> 

En supposant que vous n'ayez besoin que de deux lignes, cela les amènera à la même hauteur.

Answer 2

J'ai quelques recommandations pour vous mais je ne peux pas répondre complètement à votre question car WebKit semble bien rendre votre source quand je l'essaie.

1. D'abord, vous pouvez peut-être changer à width="100%"style="width:100%;" Peut-être combiné avec l'autre balisage, il est de mettre le navigateur en mode bizarreries. Deuxièmement, assurez-vous d'avoir le bon doctype et votre code valide ou au moins se rapproche. Le type de doctype que j'ai utilisé lors de la copie du code & était XHTML Strict.

Sinon, s'il vous plaît poster le code source de la page entière ou simplement un lien vers une démo en direct. Même une capture d'écran aiderait.

Answer 3

un bon exemple pour assurer qu'il ne montre pas correctement dans WebKit est le suivant:

<table width="200" border="1"> 
    <tbody> 
    <tr> 
     <td rowspan="2" width="15"> 
     this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height 
     </td> 
     <td> 
     this should be big instead 
     </td> 
    </tr> 
    <tr height="20"> 
     <td height="20"> 
     this row fails to size to 20 height on webkit 
     </td> 
    </tr> 
    </tbody> 
</table> 

que vous pouvez voir la partie gauche est rendue très bien, mais la partie droite devrait être différente, comme dans la partie supérieure row doit remplir l'espace sur la gauche et la ligne du bas est définie sur 20 height (comme vous pouvez le voir, ni la hauteur tr ni la hauteur du td n'est prise en compte par webkit). cela rend bien dans tous les autres navigateurs

EDIT: après avoir joué et bricoler sur mon problème, je suis venu à la solution ci-dessous. complètement sur jquery compter la lecture de la hauteur attribut propriété de la ligne que vous souhaitez modifier:

<html> 
<head> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#pipnorowspan").height(function(){ 
    return $("#rcarowspan").height() - $("#piplowerrow").attr('height') + 2; 
}); 
}); 
</script> 
</head> 
<body> 
<table width="200" style="border-collapse:collapse; border:1px solid #000;" id="ertable"> 
    <tbody> 
    <tr style="border:1px solid #000;"> 
     <td rowspan="3" width="15" id="rcarowspan" style="border:1px solid #000;"> 
     this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height 
     </td> 
     <td id="pipnorowspan" style="border:1px solid #000;"> 
     this should be big instead 
     </td> 
    </tr> 
    <tr height="20" id="piplowerrow" style="border:1px solid #000;"> 
     <td height="20" style="border:1px solid #000;"> 
     this row fails to size to 20 height on webkit 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>