Ссылка в стиле кнопки не соответствует высоте - PullRequest
Новая
       8

Ссылка в стиле кнопки не соответствует высоте

4 голосов
/ 17 августа 2011

У меня есть стилизованная кнопка и стилизованная ссылка (в соответствии со стилем кнопки). Я тестирую его в Chrome 13, Firefox 6 и IE 9. Кнопка и ссылка выглядят одинаково во всех трех браузерах, за исключением того, что в Firefox высота ссылки короче. http://jsfiddle.net/AWcYG/

Я не могу применить высоту к ссылке, потому что это не элемент уровня блока. Если я сделаю это элементом уровня блока, мне придется плавать оба, чтобы выровнять их рядом друг с другом. Кроме того, высота отключается во всех трех браузерах. Я думал об абсолютном позиционировании, но тогда я не вижу способа разместить их рядом друг с другом, если я не укажу их местоположение.

Помимо использования условных операторов, есть ли способ сделать так, чтобы высота кнопки и ссылки соответствовала во всех трех браузерах? Может быть, хак, о котором я не знаю, или, может быть, я что-то упустил?

UPDATE:

@ Уэсли, спасибо, что указал мне в этом направлении. Я обнаружил, что Firefox добавляет к своим кнопкам следующее, что объясняет, почему ваш код делает то, что делает: 

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    padding: 0px 2px 0px 2px;
    border: 1px dotted transparent;
    }

Результат очень близок к идеальному, но в Firefox 6 он все еще на 1px. Я, вероятно, исследую это немного больше и выложу еще одно обновление, если найду исправление, но даже при отключенном 1px, оно все еще намного лучше, чем раньше!

ОБНОВЛЕНИЕ 2:

Исправление, которое я нашел, было указанием высоты на кнопке: 

.db .menu input,
.db .menu a {
    background-color: #01137F;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 3px #666;
    color: #fff;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 14px;
    height: 26px;
    padding: 4px 10px;
    }

Добавление высоты делает кнопку абсолютно одинаковой с пикселем во всех трех браузерах, о которых я говорил.

1 Ответ

6 голосов
/ 17 августа 2011

Firefox, кажется, имеет особые потребности, когда дело доходит до <button> и, по-видимому, <input> кнопок. Попробуйте этот CSS только для Mozilla: 

.menu input::-moz-focus-inner {
    padding:0;
    border:0;
}

Я помню, как давным-давно застрял на этом, и кто-то в #css IRC показал мне этот трюк, похоже, он нормализует заполнение.

Демонстрация: http://jsfiddle.net/AWcYG/1/ (протестировано в FF3, 4 и 5, возможно, работает и в 6)

...