Позиционирование в теге HTML <button> - PullRequest
Новая
       36

Позиционирование в теге HTML <button>

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

Я пытаюсь создать тему для поиска с button, и у меня проблема с позиционированием текста в button.Chrome и Opera правильно отображают кнопку, а Firefox - нет.

HTML: 

<button type="submit"><span>Search</span></button>

CSS: 

button {
    border: 0;
    background: red;
    padding: 0;
    width: 200px;
    height: 50px;
    position: relative;
}
button span {
    position: absolute;
    top: 0;
    left: 0;
}

В Opera и Chrome span находится в верхнем левом углу.В Firefox отступы сверху и слева и верхняя позиция начинаются в середине высоты button.

Что я делаю не так?

Демонстрационная версия: http://doctype.n-joy.sk/button/

Спасибо

Ответы [ 3 ]

3 голосов
/ 11 августа 2011

Странно.Похоже, что Firefox сохраняет какой-то запатентованный отступ внутри элемента button.Обходной путь, который я смог реализовать, был частью CSS только для FF с довольно уродливым отрицательным полем для диапазона ... Действительно быстрое исправление, возможно, другие могут последовать с чем-то лучшим. 

button {
  background: red;
  border: 0;
  padding: 0;
  margin: 0;
}
button span {
  display: block;
  background: blue;
  width: 200px;
  height: 50px;
}
// FF only:
@-moz-document url-prefix() {
    button span {
        margin: -1px -3px;
    }
}
1 голос
/ 11 августа 2011

Похоже, что вы все сделали правильно, но есть некоторая темная магия , возникающая из стилей Firefox по умолчанию и из некоторых недокументированных, скрытых (псевдо) элементов, прикрепленных к кнопкам.

Я еще не нашел правило, которое помогло бы вам решить эту проблему, но вы можете попробовать отсканировать стили по умолчанию самостоятельно. Если вы введете в адресной строке Firefox: resource://gre-resources/forms.css, то увидите одну из таблиц стилей по умолчанию.

Некоторые из подозрительных селекторов (только дикие догадки): *|*::-moz-button-content или input > .anonymous-div. Второй, похоже, не определен для button, но кто знает, где еще находится магия?

В любом случае, я полагаю, вы можете сообщить об этом как ошибка .

0 голосов
/ 13 августа 2012

Нашел в Twitter Boostrap файл reset.less . Это исправляет это поведение. 

button,
input {
    *overflow: visible; // Inner spacing ie IE6/7
    line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
    padding: 0;
    border: 0;
}

Обратите внимание, что комментарии меньше ... не CSS, поэтому вы должны заменить // на /* ... */

...