Почему Chrome обертывает эту таблицу?

Возможно, мне не хватает очевидного, но любой намек на то, почему Chrome обертывает последний столбец в этой таблице? Разве он не должен вычислять ширину столбца, чтобы соответствовать содержимому? (учитывая, что таблица фактически не заполняет страницу). И IE, и Firefox кажутся отличными (или, по крайней мере, так, как я ожидаю, что они будут визуализированы).Почему Chrome обертывает эту таблицу?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style> 
.imgLink { 
    margin: 0 8px; 
} 
</style> 
</head> 

<body> 
    <table border="1"> 
     <tr> 
     <td>Some text</td> 
     <td>Some more text</td> 
     <td><span class="imgLink"><a href=""><img src="iconEdit.gif">Edit</a></span> 
      <span class="imgLink"><a href=""><img src="iconDelete.gif">Delete</a></span></td> 
     </tr> 
    </table> 
</body> 
</html>

Edit:

таблица не заполняя доступную ширину страницы.

Вот скриншот, показывающий упаковку в Chrome:

Chrome screenshot

я действительно нашел обходной путь для этого - просто добавив white-space: nowrap; в последней колонке таблицы. Тем не менее, я считаю, что Chrome не вычисляет ширину должным образом, или, возможно, я чего-то не хватает. Я хотел бы знать, что происходит.

источник

2012-06-29 Grodriguez

Просто угадайте здесь, но я считаю, что Chrome делает ошибку при расчете ширины ячейки таблицы. Поскольку в составных элементах не должны быть поля, он вычисляет ширину td, не принимая во внимание маржу. Но тогда он все равно рисует пролеты с полями, поэтому пролеты должны быть широкими, чтобы соответствовать расчетной ширине td, что делает их обертывание.

Так возможные решения:

сделать пролеты inline-block, так как встроенные блоки могут иметь поля обычно, а затем вычисления будет хорошо
вычислить, что в конечном итоге общая ширина будет и дать тд, что ширина
удалить запас из диапазона и отдать его в ГИМ
не используют поля на всех, но дать TD некоторое дополнение

источник

2012-06-29 12:13:39

Я думаю, что это он, да. – Grodriguez

Замечание об этом: если я правильно интерпретирую спецификацию, встроенным элементам действительно разрешено иметь запас. См. Раздел 10.3: http://www.w3.org/TR/CSS2/visudet.html#inline-width, а также эти тестовые примеры: http://meyerweb.com/eric/css/tests/css2/sec10- 03-01.htm. Поэтому, когда я верю, что вы правы в своей интерпретации того, что делает Chrome, я бы сказал, что css верен (т. Е. Я считаю, что это всего лишь ошибка в Chrome). – Grodriguez

Добавить дисплей: встроенный блок для класса imgLink: http://jsfiddle.net/surendraVsingh/MFZX2/4/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style> 
.imgLink { 
    margin: 0 8px; 
    display:inline-block; 
} 
</style> 
</head> 
<body> 
    <table border="1"> 
     <tr> 
     <td>Some text</td> 
     <td>Some more text</td> 
     <td><span class="imgLink"><a href=""><img src="https://dl.dropbox.com/u/19982181/a.png">Edit</a></span> 
      <span class="imgLink"><a href=""><img src="https://dl.dropbox.com/u/19982181/a.png">Delete</a></span></td> 
     </tr> 
    </table> 
</body> 
</html>

Другого ответа изображенной Grodriguez применяет Пробельный: Nowrap в последнюю колонку.

источник

2012-06-29 08:50:31 SVS

Спасибо за ответ. Однако на самом деле я не хочу, чтобы таблица заполняла всю доступную ширину - я хочу, чтобы она была должным образом подобрана таким образом, чтобы содержимое соответствовало без упаковки. – Grodriguez

Если нет места, он будет обернут.Другого пути нет, вам нужно указать ширину таблицы или изменить стиль содержимого в последнем столбце (уменьшить размер изображения или шрифта) – SVS

Как описано в моем вопросе, таблица НЕ заполняет доступную ширину страницы. Существует много места, но это обертывание. И это происходит только в Chrome, а не в FF или IE. Зачем? – Grodriguez

Чтобы добавить к ответу SVS, причиной этого я подозреваю, что span является встроенным элементом и, как таковой, не имеет возможности иметь запас. Я бы предположил, что хром говорит «хорошо, если вы хотите получить маржу на этом, вы должны захотеть, чтобы он был блочным элементом» и тем самым сделал его блочным элементом. И теперь, будучи элементом блока, он не будет сидеть рядом с боком, а так же разрыв строки.

Это в значительной степени подтверждается тем фактом, что установка display на inline-block работает так же, как и удаление свойства margin со стилей.

источник

2012-06-29 10:20:54 Chris

В любом случае маржа молча игнорируется, поэтому я не думаю, что это отвечает на вопрос о том, почему это происходит. –

Крис, спасибо, но поскольку @MrLister говорит, что я действительно не думаю, что это объясняет проблему. Chrome не обрабатывает эти пролеты как элементы блоков, как вы предлагаете - посмотрите на скриншот, и вы увидите, что он обертывается в середине второго интервала, а не между двумя пролетами. – Grodriguez

@MrLister: тот факт, что устранение маржи устраняет проблемы, говорит о том, что он не игнорируется, хотя, как говорит Гродригес, я запутался и не рассматривал их как блок как таковой ... – Chris

Почему Chrome обертывает эту таблицу?

ответ

Смежные вопросы