html – 输入(提交)元素在Firefox中占用额外的空间

概述带有链接,输入(提交)和跨度的网页.所有的风格都具有相同的外观,实际上输入的样式与超链接和跨度具有相同的外观. 测试使用：Firefox 3.0,3.6,4.0,14.0.1 出于某种原因,其他人的投入略大.此外,输入的文本与链接和跨度的文本不对齐.这是一个现场演示. http://jsfiddle.net/LGftW/ 这是我的CSS： a{ text-decoration:none; 带有链接,输入(提交)和跨度的网页.所有的风格都具有相同的外观,实际上输入的样式与超链接和跨度具有相同的外观.

测试使用：firefox 3.0,3.6,4.0,14.0.1

出于某种原因,其他人的投入略大.此外,输入的文本与链接和跨度的文本不对齐.这是一个现场演示.

http://jsfiddle.net/LGftW/

这是我的CSS：

a{    text-decoration:none;}input[type="submit"]{    border:0 none;    background:transparent;}a,input[type="submit"],span{    border:solID 1px green;    Font-size:64px;    Font-family:Arial;    Font-weight:bold;    float:left;    padding:0;    margin:0;}

标记：

<a href="#">link</a><input type="submit" value="input" /><span>SPAN</span>

那么如何使输入看起来像普通链接或跨度？浏览器的行为是否很奇怪,或者我只是错过了一些CSS？我现在已经解决了这一天了.

编辑

似乎问题只出现在firefox中. ie8-9和Chrome正确显示它.

解决方法 在CSS中使用输入:: – moz-focus-inner删除firefox中的按钮填充：

input::-moz-focus-inner /*Remove button padding in FF*/ {    border: 0;    padding: 0;}

已编辑：使用上述代码更新了演示链接.

在firefox中SEE DEMO

总结

以上是内存溢出为你收集整理的html – 输入(提交)元素在Firefox中占用额外的空间全部内容，希望文章能够帮你解决html – 输入(提交)元素在Firefox中占用额外的空间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。