Opera mini не поддерживает высоту строки

Я разработал веб-сайт. Однако высота строки не работает в Opera Mini.

.lbl-name {
    height: 30px;
    line-height:30px;
}

Как я могу это исправить?


person sertacyarbas    schedule 31.03.2014    source источник
comment
Вы действительно хотите поддерживать Opera mini?   -  person kumarharsh    schedule 31.03.2014
comment
Итак, кто именно поддерживает Opera Mini сейчас? dev.opera.com /статьи/просмотр/   -  person andlrc    schedule 31.03.2014
comment
у вас также есть другие параметры, такие как отступы, размер шрифта   -  person Mehar    schedule 31.03.2014
comment
И эта статья может вам помочь: phrogz.net/CSS/vertical-align   -  person andlrc    schedule 31.03.2014
comment
спасибо за все комментарии, я попробую display:table-cell; вертикальное выравнивание: посередине;   -  person sertacyarbas    schedule 31.03.2014
comment
Так же, как быстрое примечание для зрителей этого вопроса. Одно из решений, которое мне предложил Opera PM, состоит в том, чтобы использовать !important для форсирования поведения line-height на данный момент.   -  person hexalys    schedule 17.03.2015


Ответы (2)


Opera Mini пропустить все значения line-height и визуализировать все с помощью line-height: normal. Я не могу найти никаких доказательств ссылки, но по моему опыту разработки (5 лет поддержки мобильных сайтов, и Opera Mini тоже) это правда.

ИЗМЕНИТЬ (добавить ссылку для подтверждения):

Opera Mini использует системные шрифты для рендеринга текстов, потому что многие устройства не может отображать несистемные шрифты. Таким образом, он не применяет font-size/line-height свойства CSS.

person Pinal    schedule 11.04.2014
comment
Это очень положительное поведение, иначе несколько пикселей, доступных на телефонах с меньшим экраном, будут потрачены впустую из-за чрезмерной высоты строки. Чтобы правильно разделить элементы, используйте отступы. - person andreszs; 15.09.2014
comment
Ну вот . dev.opera.com/articles/opera -mini-content-authoring-guidelines/ - person davidcondrey; 08.11.2016

Используйте эти определения:

display: table; 
vertical-align: middle; 
height:50px; 

Для дочернего тега:

display: table-cell;
vertical-align: middle; 
person Геннадий Ананченко    schedule 08.11.2016
comment
Добавьте некоторое объяснение с ответом о том, как этот ответ помогает ОП в устранении текущей проблемы. - person ρяσѕρєя K; 08.11.2016