почему эта таблица html не работает должным образом в chrome?

<p>рассмотрим эту простую таблицу html:</p><pre><code><!doctype html> <html> <head> <title>test</title> </head> <body> <table style="border-collapse: collapse; table-layout: fixed; width: 280px;"> <tr> <td style="padding: 5px; width: 50px; border: 0; word-wrap: break-word;">a</td> <td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">b</td> <td style="padding: 5px; width: 100px; border: 0; word-wrap: break-word;">c</td> </tr> </table> </body> </html> </code></pre><p>это правильно отображается во всех основных браузерах, кроме chrome, в котором ширина столбцов причудливо получается равной 46px, 102px и 102px соответственно.</p><p>если я возьму декларацию ширины css из элемента таблицы, то она будет правильно отображаться в chrome. но мне нужно это там, иначе перенос слов не будет работать правильно.</p><p>есть идеи, почему это не работает? я пробовал разные типы документов, и это ничего не изменило, поэтому я предполагаю, что это не проблема таблицы html5.</p><p><strong> правка: </strong>оказывается, если вы укажете <code>table-layout: fixed</code> <em>и</em> ширину пикселя для элемента <code>table</code> <em>and</em> ширину пикселя в каждом столбце, то chrome будет считать, что ширина столбца <em>включить</em> отступы. это противоречит блочной модели w3c и нарушает требуемое поведение css2.</p><p>если вы не укажете <code>table-layout: fixed</code> или не укажете ширину пикселя в элементе <code>table</code>, то chrome правильно примет ширину столбцов, указанную вами для отступа <em>exclude</em>. все остальные браузеры предполагают, что ширина столбцов <em>исключение</em> дополняется.</p><p>в приведенном выше примере указание ширины 60px, 110px и 110px решит проблему в chrome, но затем устранит ее в любом другом браузере. значения 46px, 102px и 102px получены из chrome, равномерно распределяющего столбцы с соотношением 40:90:90 вместо 50: 100: 100.</p>

<p>я сам исправил эту проблему сегодня, используя <code>table-layout: fixed</code> и <code>box-sizing: border-box</code>, чтобы chrome прекратил учитывать отступы. в противном случае вы никогда не узнаете, какую модель размеров выберет chrome, даже для двух очень похожих таблиц.</p>

<p>мой метод, чтобы исправить это, выполняется только для браузера chrome. мы используем только фиксированные таблицы в нашем веб-приложении, и, кажется, это работает хорошо, полезно знать, что иногда chrome идеально измеряет ширину столбца, но иногда не в зависимости от того, где находится таблица (и большая часть находится внутри того, что он расположен).</p><pre><code> var correctedwidth; var extrasize; //chrome is taking the padding and border to calculate the column width , not other browsers $('table.default.fixed > thead > tr > th').each(function() { if ($(this).attr('width')!='undefined' && $(this).attr('width')!=null) { if ($(this).attr('sizeupdated')=="undefined" || $(this).attr('sizeupdated')==null) { extrasize = parseint($(this).css('padding-left'))+parseint($(this).css('padding-right'))+2; //2 for the borders (21px) if ( parseint($(this).attr('width'))!= $(this).width() ) { correctedwidth=$(this).width()+2*(extrasize); } else { correctedwidth=$(this).width()+extrasize; } $(this).attr('width',correctedwidth+'px'); $(this).attr('sizeupdated','y'); } } }); </code></pre>

<p>ну, моя математика говорит, что chrome делает то, что должен:</p><p>102 + 102 + 46 = 250 пикселей -><strong> ширина </strong></p><p>2 (5) + 2(5) +2 (5) = 10 + 10 + 10 = 30px -><strong> заполнение </strong></p><p>ширина + отступ = 250 + 30 =<strong> 280px </strong>или ширина, указанная для таблицы.</p>

<p>я исправил эту проблему, удалив родительский элемент (fieldset), который имел следующее свойство:</p><pre><code>display: inline-flex; </code></pre>