1

ボタンにカスタムの高さ (デフォルトと同じであっても) を設定すると、IE6/FF3 で最も奇妙な動作に遭遇しました。次のコードは、2 つのボタンが同じ高さであるにもかかわらず、何らかの暗黙の理由でパディングが異なり、推測可能な方法で制御できないことを示しているはずです。

<!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 に答える