IE6/FF3 中自定义高度输入 [type=button] 的奇怪填充更改
在按钮上设置自定义高度（即使与默认高度相同）时，我偶然发现了 IE6/FF3 中最奇怪的行为。以下代码应该演示，虽然两个按钮具有相同的高度，但它们的填充由于某些隐含的原因而不同，并且无法以任何可理解的方式进行控制：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>weird-padding-change</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style>
input {
vertical-align: middle;
width: 100px;
/* no effect: */
padding-top: 0;
padding-bottom: 0;
}
</style>
</head>
<body>
<div style="background:red">
<input type="button" style="height:24px;" value="_24px_"/>
<input type="button" value="_Def. Height_"/>
</div>
</body>
</html>
如果有人知道如何解释这一点，或者更好的是使填充相等- 请告诉我。
谢谢。
I stumbled upon the weirdest behavior in IE6/FF3 when setting custom height (even if it's the same as default) on a button. The following code should demonstrate that while the two buttons are of same height, their padding is different for some implicit reason and cannot be controlled in any fathomable way:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>weird-padding-change</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style>
input {
vertical-align: middle;
width: 100px;
/* no effect: */
padding-top: 0;
padding-bottom: 0;
}
</style>
</head>
<body>
<div style="background:red">
<input type="button" style="height:24px;" value="_24px_"/>
<input type="button" value="_Def. Height_"/>
</div>
</body>
</html>
If anyone has any idea how to explain this or, even better, make the padding equal - please tell me.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我在 FF3 中玩了一下，发现如果您添加：
到自定义高度按钮，无论您将按钮设置为多高，其文本仍将与默认高度按钮的文本对齐。与其他元素不同，如果输入按钮具有设定的高度或宽度，则向输入按钮添加填充不会增加其整体高度或宽度。
至于解释，天知道，也许这与浏览器如何呈现输入按钮有关，以防止它们在放大时看起来可怕的像素化。
I had a little play with it in FF3 and found if you add:
to the custom height button no matter what height you make the button its text will still line up with the default height button's text. Unlike other elements, adding padding to the input button does not add to its overall height or width if its got a set height or width.
As for an explanation, hell knows, maybe its something to do with how the browser renders input buttons to prevent them looking horribly pixelated as they are enlarged.