古怪填充變化/ FF3

我設置自定義高度時（即使它是相同的默認）上的按鈕在IE6/FF3偶然發現怪異的行爲。下面的代碼應該表明，雖然兩個按鈕是相同的高度，其填充是一些隱含的原因不同，不能在任何可測的方式來控制：古怪填充變化/ 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>

如果任何人有任何想法，這怎麼解釋，或者更好的是，使填充相同 - 請告訴我。

謝謝。

來源

2009-09-09 krukid

它們不是一樣的高度，至少在我的FF 3.0.13中。「默認」，一個是一對夫婦像素的小，所以div元素的紅色背景是可見並在其下方 – Maksee 2009-09-09 12:23:49

Maksee：是的，好了，我要傳達的問題，改變高度隱式地設置一些無法解釋的填充或對齊該不同於按鈕默認高度時使用的高度，無論高度如何。例如，如果我的默認按鈕隱含地高24px，並且我明確地告訴它是22px或甚至相同的24px高（任何其他屬性不變），文本以奇怪的方式跳到底部，甚至可能在按鈕垂直空間耗盡。 – krukid 2009-09-11 10:43:59

我在FF3它有點玩，發現如果添加：

padding-bottom:2px;

到自定義高度按鈕無論你做什麼高度的按鈕，其文本將仍然排隊與默認高度按鈕的文本。與其他元素不同的是，如果輸入按鈕具有設置的高度或寬度，則向輸入按鈕添加填充不會增加其整體高度或寬度。

至於解釋，地獄知道，也許它的東西與瀏覽器如何呈現輸入按鈕，以防止他們看，因爲他們被放大可怕的像素化的事情。

來源

2009-09-09 12:36:31

修復了它，謝謝:)儘管如此，仍然沒有讓它更容易混淆，因爲默認按鈕上的焦點矩形在底部沒有填充 - 所以它不可能是自定義高度抵消2px的默認填充底部。無法真正想象這個或那個填充會如何影響渲染過程。 *嘆*怪癖... – krukid 2009-09-11 11:08:56

古怪填充變化/ FF3

回答

相關問題