CSS WTF: кнопка формы не выровнена по горизонтали (закручена в FF, но в Chrome - ОК)

Question

ОК, вот что я обнаружил, когда я назначаю высоту всем моим элементам формы, они не будут выровнены по горизонтали, когда они на самом деле должны . Хром отрисовал это нормально, FF слишком сильно нажал кнопку формы. Есть ли в этом элегантное решение?

<form>

<input class="input_text" type="text" style="height:40px" value="some text">

<select style="height:40px">
<option value="0">0</option>
<option value="1">1</option>
</select>

<input type="submit" value="Search" style="height:40px">


</form>

Answer 1

Я обнаружил, что это ошибка в Firefox.

В прошлом я исправлял это с помощью

1: специальный взлом Firefox.

2: никогда не устанавливать высоту кнопки. Он остается вертикально центрированным во всех браузерах.

Answer 2

Это вертикальное выравнивание, а не горизонтальное. Похоже, это ошибка в FF. В качестве обходного пути добавьте «vertical-align: top» к кнопке

Answer 3

Вы можете попытаться отбросить кнопку типа ввода и использовать <button type="submit">Hello Button</button>, а затем сбросить элементы формы.

с помощью тега кнопки у вас будет возможность добавить вложенные элементы.как <button><span>Funky Button!</span></button> для трюков с фоновым изображением и т. д.

сброс для элементов формы может выглядеть примерно так:

/*remove ie side spacing(paddings)*/
button {position:relative; border:0; padding:0; cursor:pointer; overflow:visible;}
/*remove extra padding for firefox*/
button::-moz-focus-inner {border: none;}
button span {position:relative; display:block; white-space:nowrap;}

/*fix for webkit (safari-chrome)*/
@media screen and (-webkit-min-device-pixel-ratio:0) {button span {margin-top: -1px;}}

input {border:0; margin:0; padding:0;}
textarea {border:0; margin:0; padding:0;}

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

Answer 4

Убедитесь, что кнопка не имеет отступов / полей:

style="height:40px;margin:0;padding:0"

Каждый браузер делает свое дело в отношении отступов и полей.

Узнайте больше о сбросе CSS и почему / как их использовать.