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

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

html css button input

Html IE6/FF3中自定义高度输入[type=button]的奇怪填充更改,html,css,button,input,padding,Html,Css,Button,Input,Padding,当我在一个按钮上设置自定义高度（即使它与默认值相同）时，我偶然发现了IE6/FF3中最奇怪的行为。以下代码应说明，虽然两个按钮高度相同，但由于某些隐含原因，它们的填充不同，无法以任何可预测的方式进行控制： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

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


奇怪的填充变化
输入{
垂直对齐：中间对齐；
宽度：100px；
/*无效：*/
填充顶部：0；
填充底部：0；
}

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

谢谢。

我在FF3中对它进行了一次小游戏，发现如果您添加：

padding-bottom:2px;

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

至于解释，他知道，这可能与浏览器如何渲染输入按钮有关，以防止它们在放大时看起来像可怕的像素。

它们的高度不同，至少在我的FF 3.0.13中是这样。“默认”是一对小像素，因此div元素的红色背景在其上下可见MakSee：是的，好吧，我试图传达这样一个问题，即改变高度会隐式设置一些无法解释的填充或对齐方式，这与按钮为默认高度时使用的填充或对齐方式不同，无论该高度如何。例如，如果我的默认按钮隐式为24px高，并且我显式地告诉它为22px，甚至是相同的24px高（任何其他属性未触及），则文本以最奇怪的方式跳转到底部，甚至可能在按钮的垂直空间用完之前被剪裁。这修复了它，谢谢：）仍然不会让它变得更容易混淆，因为默认按钮上的焦点矩形是在底部添加的，所以自定义高度不能否定默认的填充底部2px。也无法想象这个或那个填充将如何影响渲染过程。感叹这些怪癖。。。