Chrome и "разрыв рамок" в 1 пиксел

Изначально вопрос был о лишних вертикальных отступах, появляющихся в "Хроме" для ячеек таблиц <td>, содержимым которых являются картинки в теге <img>. Просто тег <img> - не совсем обычный, по устаревшей ныне терминологии он "блочно-строчный", а не чистый блок и не инлайн. Вертикальное выравнивание vertical-align у него по умолчанию равно значению baseline, то есть низ картинки будет находиться там, где находится нижний край всех "обычных" букв. А вот буквы вроде "р", "ф", "д" и другие имеют выступающую снизу "закорючку", потому и появляется отступ. Отсюда следует, что указание в стиле последовательности

td img { vertical-align:bottom; line-height: 0; }

(или отдельного класса CSS) вполне способно спасти ситуацию. С

img { margin:0; padding:0; border-width:0; }

, наверное, будет ещё надёжнее.

Но проблемы бывают не только с лишними отступами, а ещё и с неправильным вычислением размеров "Хромом" (статья на близкую тему), связанным с субпиксельным рендерингом.

Так что разрывы эти, скорее, не в пиксел, а в пол-пиксела размером :)

В настоящее время проблема проявляется, например, на 64-разрядных системах с версией Chrome 55 dev. Особенно при высоких разрешениях экрана, вроде 1920x1080. Даже мой бложек на такой системе вдруг "заглючил":

табличный шаблон, глюк в Chrome 55

В других браузерах всё по-прежнему нормально.

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

Движок этого блога, думаю, обновлять больше не буду, а лучше, как дойдут руки, сделаю новый.

29.09.2016, 16:14 [4246 просмотров]