Question

在按钮上设置自定义高度（即使它与默认值相同）时，我偶然发现了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>

如果有人知道如何解释这个，或者甚至更好，使填充相等 - 请告诉我。

感谢。

Answer 1

我在FF3中玩了一下，发现如果添加：

padding-bottom:2px;

到自定义高度按钮，无论您使用该按钮的高度，其文本仍将与默认高度按钮的文本对齐。与其他元素不同，如果输入按钮具有设置的高度或宽度，则向输入按钮添加填充不会增加其总高度或宽度。

至于解释，地狱知道，也许它与浏览器如何呈现输入按钮有关，以防止它们在放大时看起来像是非常像素化。

IE6 / FF3中自定义高度输入[type = button]的奇怪填充更改

1 个答案: