1

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

如果有人知道如何解释这一点，或者更好的是，使填充相等 - 请告诉我。

谢谢。

4

1 回答 1

0

我在 FF3 中玩过它，发现如果你添加：

padding-bottom:2px;

到自定义高度按钮，无论您将按钮设置为什么高度，其文本仍将与默认高度按钮的文本对齐。与其他元素不同，如果输入按钮设置了高度或宽度，则向输入按钮添加填充不会增加其整体高度或宽度。

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

于 2009-09-09T12:36:31.787 回答