Les navigateurs Webkit ne prennent pas en compte le remplissage lors de la détermination de la largeur de la cellule dans la table: fixed

J'obtiens des résultats différents lorsque j'applique table-layout:fixed à une table et que j'utilise un remplissage sur les cellules. IE et Firefox semblent fonctionner correctement en ajoutant la largeur de la cellule et le remplissage ensemble. Chrome et Safari utilisent uniquement la largeur de la cellule. J'ai vu qu'il y avait un bug pour le problème, mais je ne trouve pas de solution de contournement. Est-ce que quelqu'un sait comment le contourner?Les navigateurs Webkit ne prennent pas en compte le remplissage lors de la détermination de la largeur de la cellule dans la table: fixed

WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=13339

table { 
width:200px; 
border-collapse:collapse; 
} 
#table-1 { 
table-layout:auto; 
} 
#table-2 { 
table-layout:fixed; 
} 
td { 
padding:5px 10px; 
} 
td.set-width { 
width:15px; 
} 
.box { 
width:15px; 
height:15px; 
background-color:red; 
} 

<h2>Table-Layout: Auto</h2> 
<table border="1" cellspacing="0" cellpadding="0" id="table-1"> 
<tr> 
<td>&nbsp;</td> 
<td class="set-width"><div class="box"></div></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>unbroken</td> 
</tr> 
</table> 
<h2>Table-Layout: Fixed</h2> 
<table border="1" cellspacing="0" cellpadding="0" id="table-2"> 
<tr> 
<td>&nbsp;</td> 
<td class="set-width"><div class="box"></div></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>unbroken</td> 
</tr> 
</table>

Source

2010-12-14 Ann

Toute mise à jour quant à la façon dont de ces solutions a aidé? –

Je suis tombé sur la même chose. Nous utilisons un certain nombre de formats fixes et il est bon d'appliquer un remplissage dans la feuille de style afin de pouvoir transférer du texte dans une cellule. C'est un peu triste que cela a été dans le bug tracker depuis 2007 et c'est tellement hors spécifications. –

Il existe 3 méthodes que je peux penser. Le plus simple serait d'ajouter des blocs de feuille de style interprétés uniquement par Chrome et Safari qui ajustent le comportement pour prendre en compte le problème de rendu. Évitez d'utiliser "@media screen et (-webkit-min-device-pixel-ratio: 0)" car cela peut affecter Opera et certaines versions de FF. Utilisez "corps: la première du type":

body:first-of-type td { 
padding:5px 10px; 
}

Vous pouvez aussi avoir des feuilles de style distinctes:

<link rel="stylesheet" type="text/safari" href="webkit-styles.css" /> 
<link rel="stylesheet" type="text/chrome" href="webkit-styles.css" />

La troisième option consiste à utiliser Javascript. Dans les balises de script, vous pouvez utiliser navigator.appName et navigator.appVersion pour identifier le navigateur et résoudre les problèmes de manière dynamique.

Source

2010-12-14 18:06:52

Si vous avez un diff dans la façon dont ils calculent la largeur lorsque le rembourrage est impliqué, pourquoi ne pas enlever le rembourrage du td?

<table style="table-layout: fixed;"> 
<tr> 
    <td style="width: 100px;"> 
    <div style="padding: 10px;"> 
    lorem, ipsum. 
    </div> 
    </td> 
</tr> 
</table>

Source

2011-02-10 05:37:43

Définissez le type de position (absolu/relatif, etc.) des boîtes pour obtenir des résultats égaux, vous devez modifier les boîtes de là.

Source

2011-02-17 03:35:24 Undefined

Vous pouvez contourner ce bogue si vous utilisez la balise <colgroup> et spécifiez des largeurs sur le <col> au lieu du.

.secondCol { 
    width: 15px; 
} 

<table border="1" cellspacing="0" cellpadding="0" id="table-2"> 
    <colgroup> 
    <col class="firstCol"> 
    <col class="secondCol"> 
    </colgroup> 
    <tr> 
    <td>&nbsp;</td> 
    <td><div class="box"></div></td> 
    </tr> 
</table>

Source

2011-04-23 00:07:22 Jason