html – 设置为按钮的链接高度不一致

概述我有一个风格的按钮和风格的链接(以匹配按钮的风格).我在Chrome 13,Firefox 6和IE 9中测试它.按钮和链接在所有三种浏览器中看起来都相同,除了在Firefox中链接的高度更短. http://jsfiddle.net/AWcYG/ 我无法在链接上应用高度,因为它不是块级元素.如果我把它作为块级元素,我必须浮动它们以使它们彼此相邻.此外,然后在所有三个浏览器中关闭高度.我考虑过绝对 我有一个风格的按钮和风格的链接(以匹配按钮的风格).我在Chrome 13,firefox 6和IE 9中测试它.按钮和链接在所有三种浏览器中看起来都相同,除了在firefox中链接的高度更短. http://jsfiddle.net/AWcYG/

我无法在链接上应用高度,因为它不是块级元素.如果我把它作为块级元素,我必须浮动它们以使它们彼此相邻.此外,然后在所有三个浏览器中关闭高度.我考虑过绝对定位,但是除非我对其位置进行硬编码,否则我没有办法让它们彼此相邻.

除了使用条件语句之外,还有什么方法可以在三个浏览器中使按钮和链接的高度匹配？也许是一个我不知道的黑客,或者我错过了什么？

更新：

@Wesley感谢你指点我的方向.我发现firefox在其按钮上添加了以下内容,这解释了为什么您的代码可以执行以下 *** 作：

button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="@R_403_6852@"] > input[type="button"]::-moz-focus-inner {    padding: 0px 2px 0px 2px;    border: 1px dotted transparent;    }

结果非常接近完美,但在firefox 6中它仍然是1px.我可能会研究一下这个并发布另一个更新,如果我找到一个修复,但即使只有1px关闭,它仍然比以前好多了！

更新2：

我找到的修复是指定按钮上的高度：

.db .menu input,.db .menu a {    background-color: #01137F;    border: 1px solID #fff;    border-radius: 5px;    Box-shadow: 2px 2px 3px #666;    color: #fff;    cursor: pointer;    Font-family: Arial,sans-serif;    Font-size: 14px;    height: 26px;    padding: 4px 10px;    }

在我指的所有三个浏览器中,添加高度使按钮与像素完全相同.

解决方法 对于< button>而言,firefox似乎有特殊需求.并且显然< input>纽扣.试试这个仅限mozilla的CSS：

.menu input::-moz-focus-inner {    padding:0;    border:0;}

我记得很久以前就被卡在了这一周,而#CSS IRC的某个人向我展示了这个技巧,它似乎规范了填充.

演示：http://jsfiddle.net/AWcYG/1/(在FF3,4和5中测试,希望在6中也可以使用)

总结

以上是内存溢出为你收集整理的html – 设置为按钮的链接高度不一致全部内容，希望文章能够帮你解决html – 设置为按钮的链接高度不一致所遇到的程序开发问题。

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