代码之家 › 专栏 › 技术社区 › krukid

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

padding input button css html

krukid · 技术社区 · 16 年前

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

如果有人知道如何解释,或者,更好的是,让填充物相等-请告诉我。

谢谢。

1 回复 | 直到 16 年前

Wayne Austin 16 年前

我在ff3中玩了一会儿,发现如果你加上:

padding-bottom:2px;

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

至于一个解释,地狱知道,也许它与浏览器如何渲染输入按钮,以防止它们看起来可怕的像素化,因为它们被放大。

推荐文章

Aleph · 如何使这篇文章连贯一致?[副本]

1 年前

fghoussen · 在C结构体中,为什么打包、对齐似乎会进行填充?

1 年前

efwefwefwefwefw wefwefwefwef · 如何在PyTorch Conv1d层中仅在一侧应用填充?

2 年前

Alexander S · 调用placement new时填充是否重要?

2 年前

BENG · 协调C++和Objective-C中结构的填充

2 年前

JTA1618 · 如何按组将可变数量的空白行附加到数据帧?

2 年前

JTA1618 · 如何在python中填充嵌套列表?

2 年前

Shubham Singhvi · 衬垫顶部在绝对子元素之间产生额外间隙

3 年前

Kishore Suresh · C/C中字符数组的填充++

3 年前

user7907740 · 如何使填充响应

8 年前