15

すべてのブラウザは、内部に魔法のハードコードされたパディングを追加しているようです<input type="text">。一部のブラウザー (IE、Safari、Chrome) では、入力ボックスの高さが少し高くなりますが、通常の HTML 要素のように適切に上部に配置されます。私は余分な高さと一緒に暮らすことができます。しかし、一部のブラウザー (Firefox および Opera) は正しく動作せず、テキストを垂直方向に揃えるか、その上に余分なパディングを追加しようとします。最近のブラウザーでは、テキストボックスを HTML と同じようにレイアウトしたり、魔法の書式を追加したりすることができないことに驚いています。私は何か間違ったことをしていますか？いくつかのトリックがありませんか？それらは私を助けることができるいくつかの独自のCSSプロパティですか? Firefox の CSS ドキュメントをざっと見ましたが、何も見つかりませんでした。または、代わりに編集可能な HTML を使用することもできます<input type="text">。

問題を示すスニペットを次に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <title>Test</title>

    <style type="text/css">

        body, input {
            font-family: sans-serif;
            font-size: 16pt;
            color: White; }

        #textbox {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 100px;
            background-color: #A5C9E2;
            line-height: 16pt;
            padding: 0px;
            margin: 0px;
            border-width: 0px; }

        #box {
            position: absolute;
            left: 120px;
            top: 20px;
            width: 100px;
            background-color: #AFD66A;
            line-height: 16pt; }

    </style>

</head>
<body>

    <input type="text" id="textbox" value="Hello">

    <div id="box">Hello</div>

</body>
</html>

編集: Firefox で-moz-outlineと-moz-box-sizingを少し試してみましたが(念のため)、それらの値のいずれも余分なパディングを削除しません。

4

2 に答える 2

9

入力のボックスサイズを変更することで、この余分なパディングをなくすことができます。

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

これにより、最新のブラウザーが同じように動作します。IE を具体的にターゲットにする必要がある場合があります。

于 2010-08-02T21:00:40.177 に答える