gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 19:24:12 25 4
gpt4 key购买 nike

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

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

谢谢。

最佳答案

我在 FF3 中玩了一下,发现如果你添加:

padding-bottom:2px;

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

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

关于html - IE6/FF3 中自定义高度输入 [type=button] 的奇怪填充更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1399263/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com