设置HTML提交按钮的样式（CSS、不同浏览器）

我想设计一个提交按钮，它在不同的浏览器中呈现出不同的效果

<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 {
    ...

---

请注意，当

#btnSubmit

具有

底部：3px

时，chrome上的添加按钮太低。如果在chrome中使用

底部：5px解决了该问题，但在Firefox中，该问题将过高
请尝试将此添加到css文件的顶部：

*{
margin:0;
padding:0;
}

这样，您就可以测试是否存在一些默认的浏览器填充/边距问题，而无需使用一些大型css重置内容

我可以告诉你的是，我认为问题在于你正在将其包装在
中，它有默认的10px底部和顶部填充，所以也许可以尝试在css中将其重置为0

#lineInput{
padding:0;
}

或者把这段改成div

也许这就是解决方案，但也许不是，因为您正在使用绝对定位

我计算过像素，图片两部分的字母都是15px。在firefox中，橙色部分末尾的字母是11px，而在chrom中是8px。在firefox中，从字母顶部到橙色部分的开头是12px，在chrom中是10px。这就是5px的差异

试试这个：

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

这将使按钮高38像素，字母将位于按钮的左上角。然后你可以加上这个：

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

em
不是浏览器/平台依赖单元吗？如果使用像素来调整文本大小，会发生什么情况？我正在尝试定位文本，而不是更改大小。。。哦，是的，镀铬的看起来更小！谢谢。。。我试着用px的大小似乎不太合适。。。我认为有一些默认的浏览器填充？：）尝试众多CSS重置样式表中的一个，以确保两个浏览器从同一位置启动。如果结果仍然不同，则这是浏览器渲染问题。
text-align:center;
padding-top:10px; // or how much is needed to be verticaly centered.