CSS селектор отдельно для Mozilla Firefox 3.6

sikwel · №1

Здравствуйте, умные люди.

Столкнулся с проблемой написания отдельных CSS правил после выхода новой версии любимого браузера mozilla firefox 3.6.

Дело в том, что для центрирования текста по вертикали в кастомизированных полях ввода, отдельно для firefox я пользовался таким вот вендорным селектором:

Выделить код

Код:

@-moz-document url-prefix() {
     .selector {
          бла бла бла;
     
     }
}

в новой 3.6 версии этот хак не работает, поиски результатов не дали, может кто-нибудь уже придумал или нашел решение?

luitzen · №2

Гм, а если открыть html-файл на собственном жестком диске вот с таким содержимым:

Выделить код

Код:

<style>
@-moz-document url-prefix()
{
body { background: yellow; }
}
</style>
<body>
</body>

У меня фон желтый, а у вас?

Отредактировано luitzen (10-02-2010 18:49:50)

sikwel · №3

действительно, хак работает и в 3.6, извините за то, что ввел в заблуждение.

Сам только сейчас понял ошибку.

Дело в том, что этот хак на самом деле работает во всех лисицах в том числе и в 3.6, этим хаком я выравнивал текст в текстовом инпуте по вертикали.

Так вот, если указывать текстовому инпуту высоту, к примеру 30 пикселей, и выравнивать текст с помощью line-height:30px; , то текст выравнивается во всех браузерах, кроме firefox, там мне приходилось выравнивать текст паддингом при этом использовав хак, который я привел выше. Теперь дело осложнилось тем, что в новой лисе 3.6 убрали багу и теперь в ней тоже текст выравнивается по центру как и во всех остальных браузерах а в версиях ниже, вплоть до 3.5 текст по прежнему приходится выравнивать паддингами, вот и получается, что нужно как-то оградить новый фаерфокс 3.6 от всех его предшественников. Забивать на предшественников думаю будет кощунством.

Может быть кто-нибудь посоветует какой-нибудь более кросс-браузерный метод выравнивания текста в "высоких" инпутах под этот браузер?

luitzen · №4

Ой, а можно с примерами. В следующем примере текст у меня оказывается центрированным по вертикали:

Выделить код

Код:

<input value = "middle" style="height: 30px;">

sikwel · №5

luitzen пишет

Ой, а можно с примерами.

пожалуйста:

Выделить код

Код:

.search_input  {
    border:1px solid #515151;
    font-size:14px;
    color:#6c6c6c;
    padding:0 6px;
    height:27px;
    width:200px;
    line-height:27px;
    margin:0 auto;
    font-style:italic;

}

в этом примере во всех фаерфоксах текст в инпуте выравняется по верхнему краю, а в фаерфоксе 3.6 сработает свойство line-height:27px; и текст отцентрируется по вертикали.

luitzen · №6

Выделить код

Код:

<style>
.search_input {font-size: 14px; height: 27px;}
.centered {padding-top: 3px; padding-bottom: 3px;}
</style>

<table>
<tr>
<td><input value="input" class= "search_input"></td>
<td><input value="input" class= "centered search_input"></td>
</tr>
</table>

В 3.5 и 3.6 текстовые поля справа выглядят одинаково и к тому же одинаково с тем, как выглядит левое в 3.6. Разумеется, «решение» годится только для ваших размеров, плюс могут быть проблемы с положением самих текстовых полей .

sikwel · №7

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

поэтому я и написал на этот форум, в надежде что кто-то знает как это сделать (;

Полезная информация

№109-02-2010 14:50:36