无论是在 firefox/chrome 还是 opera/ie 中,按钮文本位置都不同。
我有一个按钮和文字。在 Opera 中,它比在 Firefox 中低一点。
HTML:
<button>
some
</button>
CSS:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
}
如何防止文本按钮的这种“跳跃”?
还有一个额外的问题:可能有人知道如何防止浏览器中字体粗细的这种不同视觉?(参见图片)
附:我用谷歌搜索 - 没有找到答案
EDIT: FIDDLE http://jsfiddle.net/3s4n1u3d/
EDIT_2:浏览器已更新到最新版本。 (可能不包括 IE,但 Opera 也有这个问题)。操作系统:Windows 8.1 Industry Pro
您尚未定义字体大小和字体粗细,因此不同的浏览器将按钮字体视为自己的字体。明确设置这些可以解决问题:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
font: 16px normal Arial;/*change as per your requirement*/
}
Update:
我针对按钮标签的关键问题找到了交叉解决方案。按钮的默认样式是display: inline-block;
.
并且不同的浏览器确实有不同的垂直对齐(顶部,中间,...),因此将垂直对齐固定到按钮将解决问题。
因此,对于按钮 css,添加以下代码行:
vertical-align: middle;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)