我试过这个简单的html:
TEST FONT SIZE</br>
<input type="button" value="test bytton" style="font-size:20px">
<a style="font-size:20px">test link</a>
并发现尽管样式不同,但此按钮的字体大小看起来比链接的字体大小大。有谁知道为什么样式对于链接和按钮的工作方式不同,以及如何使它们看起来一样?
字体大小是一样的。但它看起来不同,因为默认页面字体与默认输入字段字体不同。将font-family
两个元素上的 设置为相同,它们看起来相同。
我通常这样做:
body, input, button, select, option, textarea {
font-family: ...; /* whatever font */
}
body {
font-size: x%; /* whatever base font size I want */
}
input, button, select, option, textarea {
font-size: 100%;
}
在页面和表单字段上获得一致的字体。
在 Chrome 中遇到了同样的问题,后来发现关键原因是
body {
-webkit-font-smoothing: antialiased
}
将其更改为
body {
-webkit-font-smoothing: subpixel-antialiased;
}
修复。
对我来说看起来一样,在 Firefox、IE6 和 Chrome 上测试:http: //jsbin.com/oveze
请记住:
您不应该对按钮使用太多 CSS,因为它们的显示取决于用户的操作系统。
相反,您可以使用例如图像。