样式化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;
}

当#btnSubmit有bottom: 3px时，请注意Chrome上的添加按钮太低。如果使用bottom: 5px在Chrome中修复但在Firefox中的问题太高

Answer 1

尝试将此插件添加到css文件的顶部：

*{
margin:0;
padding:0;
}

这样你可以测试是否存在一些默认的浏览器填充/边距问题而不使用一些大的css重置东西...

我可以告诉你的是，我认为问题在于你将<p></p>包裹在默认 10px底部和顶部填充中，所以可能尝试将其重置为0的CSS。

#lineInput{
padding:0;
}

或者只是将该段改为div。

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

我已经计算了px和图片两部分中的字母都是15px。在firefox下面，橙色部分末尾的字母为11px，而色度为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.