在Firefox中，在文本值周围添加了额外的间距（不仅仅是垂直空间，如行高，也可以是水平）。
Chrome，Opera（行高问题略有不同），甚至IE都会渲染提交按钮，而不会增加任何额外空间。
http://jsfiddle.net/jswartwood/aFCwj/
如果您打开萤火虫并将鼠标悬停在＆lt; a＆gt;上和＆lt;输入＆gt;分别，你可以看到它不是填充等等。
从bug tracker的声音来看，似乎Firefox在这些表单元素中放置了一个“块”？！？！如果这是真的，为什么？这使得视觉按钮的大小很难保持一致。
答案 0 :(得分：1)
在深入了解Firefox源代码（ layout / style / forms.css ）之后，我发现::-moz-focus-inner是我需要的影子选择器。
我仍然不同意mozilla强迫行高的选择，但这是另一个故事;同时，我可以通过设置line-height：normal来标准化所有浏览器。
input::-moz-focus-inner {
padding: 0;
border: 0;
}
答案 1 :(得分：0)
回答您的原始问题：我不相信CSS可以成功地将输入提交元素设置为在所有浏览器中完全一致。
每个浏览器都以不同的方式呈现这些元素。 Explorer的按钮与Windows保持一致。 Safari的按钮与Mac造型保持一致。 Firefox，Chrome，Opera等都会做自己的事情。
如果设计中的提交按钮在所有浏览器中看起来都相同，那么您可以创建自定义图形并将其设为按钮。
只需使用以下内容替换您的提交按钮代码即可...
<input type="image" src="myButtonImage.jpg" alt="" />
您可以选择使用CSS Sprites或JavaScript在悬停，点击等时交换按钮图像
答案 2 :(得分：0)
按钮不一定是按钮。您可以使用任何其他元素，例如示例中的a，甚至更好span。并将其绑定点击事件以提交表单。