Браузеры Webkit, не учитывающие заполнение при определении ширины ячейки в макете таблицы: исправлено - PullRequest
Новая
       7

Браузеры Webkit, не учитывающие заполнение при определении ширины ячейки в макете таблицы: исправлено

18 голосов
/ 14 декабря 2010

Я получаю разные результаты при применении table-layout:fixed к таблице и использовании заполнения ячеек.IE и Firefox, кажется, работают правильно, складывая вместе ширину ячейки и отступы.Chrome и Safari используют только ширину ячейки.Я обнаружил, что есть проблема, но не могу найти обходных путей.Кто-нибудь знает, как это обойти?

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>

Ответы [ 4 ]

1 голос
/ 23 апреля 2011

Эту ошибку можно обойти, если использовать тег <colgroup> и указать ширину <col> INSTEAD OF для <td>. 

.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>
1 голос
/ 10 февраля 2011

Если у вас есть разница в том, как они вычисляют ширину, когда используется заполнение, почему бы не удалить заполнение из td? 

<table style="table-layout: fixed;">
 <tr>
  <td style="width: 100px;">
   <div style="padding: 10px;">
    lorem, ipsum.
   </div>
  </td>
 </tr>
</table>
1 голос
/ 14 декабря 2010

Есть 3 метода, о которых я могу подумать.

Самый простой способ - добавить блоки таблиц стилей, интерпретируемые только Chrome и Safari, которые настраивают поведение с учетом проблемы рендеринга.Избегайте использования "@media screen and (-webkit-min-device-pixel-ratio: 0)", так как это может повлиять на Opera и некоторые версии FF.Используйте «body: first-of-type»: 

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

Вы также можете иметь отдельные таблицы стилей: 

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

Третий вариант - использовать Javascript.В тегах скрипта вы можете использовать navigator.appName и navigator.appVersion, чтобы идентифицировать браузер и динамически исправлять проблемы.

0 голосов
/ 17 февраля 2011

Установите тип позиции (абсолютный / относительный и т. Д.) Для блоков, чтобы получить равные результаты, вам нужно будет настроить поля оттуда.

...