Firefox 3.6 и CSS отличаются от предыдущих версий Firefox 3.5 и обратно? - PullRequest
Новая
       34

Firefox 3.6 и CSS отличаются от предыдущих версий Firefox 3.5 и обратно?

3 голосов
/ 25 января 2010

Итак, при обновлении до Firefox 3.6 CSS сломался на полях ввода. Увеличился отступ - возможно, размер шрифта ведет себя по-другому. Интересно, видел ли кто-нибудь еще эту проблему. Не могу понять это.

HTML-КОД: 

<form>
    <fieldset>
        <label for="inputField">Label</label>
        <input type="text" id="inputField" />
    </fieldset>
</form>

КОД CSS: 

form fieldset label {
    display:block;
    font-size:1.2em;
    font-weight:bold;
    padding:12px 9px;
}
#jumptoBox fieldset input {
    background: url("../images/input.png") no-repeat scroll left top transparent;
    font-size: 1.2em;
    padding: 4px 5px 16px;
    width: 99px;
    height: 29px;
}

(Размеры изображения: 109 ширина х 34 высота)

Итак, одно замечание: исправление (как описано ниже) включает в себя удаление высоты или, по крайней мере, установку ее на автоматический, а затем компенсацию за это с помощью заполнения (исправление, которое беспокоит меня на многих уровнях, но мы пока отложим это). НО у webkit, похоже, есть свои проблемы с этим, так как он хочет центрировать текст вертикально (игнорируя любые признаки высоты строки) в соответствии с высотой всего. Другими словами, если вы хотите, чтобы текст располагался ближе к вершине, я не смог найти способ сделать это.

Идеи

Ответы [ 10 ]

4 голосов
/ 25 января 2010

Вот несколько советов по устранению проблемы, поскольку вы не опубликовали достаточно информации для каких-либо конкретных предложений:

3 голосов
/ 02 февраля 2010

Firefox 3.5 и Firefox 3.6 визуализируют ввод CSS по-разному. Я сделал это, и это исправило мои данные. Я убрал высоту и добавил отступы сверху и снизу. Высота отступов в сочетании с высотой моего шрифта позволили ввести правильную высоту в обоих браузерах и текст, отображаемый в центре при вводе текста.

СЛОМЛЕННОЕ: 

input
{
    border: 1px solid #d7d7d7; 
    background-color:#fff;
    height:19px;
    padding:5px 2px 0 2px;
}

ИСПРАВЛЕНО: 

input
{
    border: 1px solid #d7d7d7; 
    background-color:#fff;
    padding:5px 2px;
}
2 голосов
/ 08 февраля 2010

Мне тоже пришлось удалить высоту строки, чтобы она работала в IE.

2 голосов
/ 25 января 2010

У меня точно такая же проблема с моим собственным сайтом. У меня есть публичная версия, которую вы можете увидеть по адресу: http://www.cleantelligent.com/login-example/

Для меня это связано с настройкой фона изображения CSS на вводе текста / пароля.

Добавление таблицы стилей сброса (в локальной копии) не имеет значения, и CSS проверяет.

EDIT: Удаление высоты в CSS и добавление дополнительных отступов, кажется, делает свое дело. Я сузил его до того, что FF 3.5 и IE поместили текст вверху ввода вертикально, в то время как FF3.6 и webkit центрируют текст вертикально. Использование отступа вместо высоты для увеличения поля позволило правильно разместить текст.

1 голос
/ 28 января 2011

Проблема заполнения может быть решена с помощью: 

input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner
{
 padding: 0px; border: 0px
}
1 голос
/ 05 февраля 2010

Удаление атрибута высоты из поля ввода и определение вертикального интервала только с помощью отступов решило проблему для меня.

0 голосов
/ 18 марта 2010

Хорошо. Я только что подумал о (раздражающем) решении проблемы веб-набора: добавьте равные части, заполненные сверху и снизу, и выровняйте положение изображения по центру текста. У кого-нибудь есть другие (лучшие?) Идеи? Это хорошо работает только в этой ситуации, потому что вход абсолютно позиционирован. В других сценариях мне, возможно, придется включить отрицательное верхнее поле, чтобы компенсировать дополнительный отступ сверху, чего я обычно стараюсь избегать.

Также не забудьте убрать высоту, как уже указано в других комментариях.

0 голосов
/ 25 февраля 2010

Да - сочетание Firefocket + высота меня сломало в FireFox 3.6. Я убрал высоту на моем входе и компенсировал потерю этого значения, увеличив отступ в нижней части данного элемента. Теперь все в порядке. Единственная проблема, с которой я столкнулся с FF 3.6 на сегодняшний день, была с онлайн-формами и вводом.

(мои данные были использованы для фоновых изображений)

0 голосов
/ 26 января 2010

Я исправил эту проблему, добавив !important css только для входных данных, например: 

input.gld-editable-input {
 padding: 3px 6px !important;
}

Решил проблему в FF3.6, но позвольте мне сохранить уже работающий отступ в Webkit ...

0 голосов
/ 26 января 2010

Ничего подобного в FF 3.6. Вот сайт, где это происходит для меня: http://www.pointtopointsurvey.com/ (окно поиска)

Я использую xhtml переходный тип документа, и когда я запускаю свой CSS с помощью проверки, единственными ошибками, которые я получаю, являются свойства CSS3 на основе браузера (-moz-border-radius).

Я также использую слегка измененную версию сброса CSS Эрика Мейера

Я также хотел бы отметить, что, похоже, это влияет только на вертикальное заполнение, а не на горизонтальное заполнение.

...