Исправить text-align justify в Opera 12 в css — кривое горизонтальное выравнивание нумерованного списка — использовать css только для оперы

Как сделать строки в css только для Оперы и исправление в ней кривого text-align:justify для нумерованного спискаДа, я помню, что в прошлой статье я обещал разобраться со счетчиками скачиваний файлов. Но меня просто жутко задолбало, что опера 12 криво показывает нумерованный список. Если он выравнен в css с помощью text-align:justify; (ну или text-align: justify; — пробелы не воспринимаются в css), то в случае, если текст занимает больше, чем одну строку, то первая строка сильно смещается вправо, и текст в ней с правого края уходит за пределы блока так, что его становится не видно. И если, скажем, в случае простого текста этого легко можно избежать, просто не создавая тегов нумерованного списка, а просто введя номера пунктов вручную, то в случае, когда в конце статьи выводится список похожих или рекомендуемых постов с помощью плагина Yet Another Related Posts Plugin (YARPP), создающего как раз нумерованный список, то выглядит все это мягко говоря — ужасно, о чем же эти связанные посты — ну абсолютно не понятно. Глюк это известный, идет еще с opera 11, и в 12 так и остался непофиксеным. Остальные браузеры — выводят все отлично, никаких проблем, так что это баг именно оперы. Поэтому небольшое лирическое отступление, как я это вылечил.

Выглядит это примерно так:

Глюк оперы с отображением выравненного по ширине нумерованного списка

Решение есть — не самое лучшее, но тем не менее. Для одиннадцатой оперы было описано здесь, но данный код в 12-ой — к сожалению, не работал. Соответственно была задача прикрутить тоже самое к 12-ой. Для этого можно воспользоваться специальным css свойством, которое задает, что все, что попадает внутрь этого свойства, должна понимать только 12-я опера, а все остальные браузеры — игнорировать. Нашел вот здесь. Типа кросс-браузерная верстка — заставить использовать css только для оперы и запретить для chrome, safari, firefox 🙂 Вкратце звучит оно так:

тег или .класс необходимо заменить на тот тег или класс, к которому требуется применить стиль в опере, ну а свойство: значение; — тем стилем, который необходимо использовать.

В случае с нумерованым списком используются теги ol и li. В моем случае li выводится со сдвигом на 20 пикселей, в css это выглядит так:

Нам необходимо, чтобы текст выравнивался только в записях, а не в сайдбаре (чтобы ничего не поехало) => у меня это класс entry, только в списках (тег ol) и  соответственно, внутри тегов li. Получится .entry ol li. Дальше, поскольку опера считает, что наш номер перед текстом тоже необходимо выравнять, необходимо его сделать с маркером list-style-position: inside; (маркер, обтекаемым текстом), после чего сместить первую строчку на 20 пикселей влево свойством text-indent:-20px; ну и можно на всякий случай еще раз добавить text-align: justify.

Итого код:

А выглядеть все стало так:

Вылечили глюк оперы по отображению нумерованного списка, выравненного по ширине

Для остальных браузеров все осталось неизменно — они это правило просто не видят.

Небольшое примечание: если вставить вот этот код для 11 оперы, начинающийся с:

то наш код для 12-ой работать перестанет.

Ну, уж сказал А, то скажу и Б. А именно — про  css только для chrome. Чтобы аналогично описанному с оперой — но понимал только хром.  Мне это потребовалось, когда обнаружилось, что в подписке на обновления сайта хром не выводит placeholder, потому что в коде subscribe2 он жутко криво прописан — не плейсхолдером

, а через value=»Enter email address…» — вот таким вот жутким кодом:

В результате шрифт выводился не италиком, через -webkit-input-placeholder, как изначально было задумано. А в опере — все отрабатывалось отлично. Можно было, конечно, переделать код плагина — но при обновлении он бы снова переписался. А найдя хак для css google chrome, а именно:

и добавив в style.css строчку

удалось все вывести более-менее красиво. Правда, потом обнаружилось, что в файрфоксе это тоже не работает 🙂

Вот так вот. Ну уж теперь — точно — в следующей статье — о счетчиках скачиваний для вордпресса.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Subscribe without commenting

QR Code Business Card