Стилизация HTML-кнопки отправки (CSS, разные браузеры)

Question

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

<p id="lineInput">
    <label for="task">Add a Task</label>
    <input type="text" name="task" id="task" />
    <input type="submit" id="btnSubmit" value="Add" />
</p>

#lineInput {
    ...

позиция: относительная; поле: 0px; }

#btnSubmit {
    ...
    padding: 6px 8px;
    margin: 0;
    font: 1em/1em Hetilica;
    position: absolute;
    right: 2px;
    top: 3px;
}

обратите внимание, что кнопка добавления слишком мала на Chrome, когда #btnSubmit имеет bottom: 3px. проблема, если она исправлена ​​в chrome с bottom: 5px, но в Firefox будет слишком высокой

Answer 1

Попробуйте добавить это в начало вашего CSS-файла:

*{
margin:0;
padding:0;
}

Таким образом, вы можете проверить, есть ли какая-то проблема с отступом / полем браузера по умолчанию, без использования больших настроек сброса css ...

Что я могу вам сказать, так это то, что, по-моему, проблема заключается в том, что вы упаковываете это в <p></p>, который имеет по умолчанию 10px нижний и верхний отступы , поэтому, возможно, попробуйте сбросить его до 0 в вашем CSS. 1009 *

#lineInput{
padding:0;
}

Или просто измените этот абзац на div.

Может быть, это решение, но, возможно, это не так, потому что вы используете абсолютное позиционирование ...

Я посчитал пиксели и буквы в обеих частях картинки по 15 пикселей. В Firefox ниже буквы до конца оранжевой части - 11px, а в chrom - 8px. В Firefox от верха букв до начала оранжевой части 12px, а в chrom 10px. Так что это 5px разницы.

Попробуйте это:

#btnSubmit{
height:38px;
padding:0;
}

Это сделает кнопку высотой 38px, а буквы будут в левом верхнем углу кнопки. Тогда вы можете добавить, возможно, это:

text-align:center;
padding-top:10px; // or how much is needed to be verticaly centered.