0

このフィドルには、入力ボックスとうまく並んだボタンがあります（現在Safariで作業しています）。

http://jsfiddle.net/hNx6E/13/

ただし、ボタンの高さは入力の高さにはなりません。これが私の計算です。

ボタンの高さ=フォントの高さ+パディングトップ+パディングボトム+ボーダートップ+ボーダーボトム=

16 + 8 + 8 + 1 + 1 = 34

入力の高さ=高さ+境界線の上部+境界線の下部=

34 + 1 + 1 = 36

どこかに2pxが欠けています。

フィドルでは、最後に正規化を行い、すべてを正規化することに注意してください（使用されている要素だと思います）。

p , input, div, body

また、フィドルでは、CSSの正規化をオフにしていることに注意してください。bc手動で行います。

フィドルは応答をやめましたが、次に、私が気付いていない要素をいくつか省略したかどうかを判断するために、正規化を試みました...今すぐ...左側の正規化ボックスをチェックしましたが、これは何も変わりませんでした。

今のところ、これはハックbcだと思います。欠落しているピクセルを考慮して、高さを2px変更しました...しかし、理解できる方法で機能させたいと思います。

4

2 に答える 2

2

垂直方向に整列する代わりに、を使用heightしてみてください。したがって、次のようなものが得られます。line-heighttop/bottom padding

#po_but {
  height: 34px;
  line-height: 34px;
  padding: 0 6px;
}

ところで、あなたのコードはMacのsafari/chromeで問題ないように見えます。

于 2012-07-20T15:22:45.840 に答える
2

34 + 1 + 1 =36//固定

何？入力の幅は34px+ボーダーの2pxで、合計36pxです。次の問題はline-height、ボタンの高さを増やすことです。

私はline-height: 1emのため#po_butに設定しwidth: 32pxました#po_in、ここでデモを参照してください。高さは両方とも34pxになりました。

于 2012-07-20T15:23:32.503 に答える