7

入力をプレーンテキストのように見せようとしています。目的はスパンを描画することです。ユーザーがスパンをクリックすると、非表示になり、プレーンテキストのように見えるがユーザーが編集可能な入力が表示されます。

Chrome と Firefox では、パディングとマージンの CSS プロパティを 0 に設定しても、上下のパディングを取り除くことができません。

私のCSSは次のようになります。

input.myInput {
    font-family: "segoe ui";
    font-size: 20px;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: 0px;
    vertical-align: baseline;
}

フォント サイズが 20px に設定されていることを確認します。Chrome と Firefox は 4 ピクセルの padding-top と padding-bottom を追加するため、入力の高さは 20 ピクセルではなく 28 ピクセルになります。

4

3 に答える 3

7

line-height入力要素の も 20pxにリセットする必要があります。デフォルトでは、一部のブラウザーは入力要素の行の高さに 4px (上部 2 + 下部 2) を追加します。

于 2012-05-03T17:18:11.060 に答える
2

それはあなたのフォントかもしれません。入力の CSS の高さを直接設定するか、line-height を調整してみてください。

于 2012-05-03T17:19:02.207 に答える
2

Diodeus が提案したように、入力に高さを追加するだけです。

input.myInput {
    font-family: "segoe ui";
    font-size: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: 0px;
    vertical-align: baseline;
}

行の高さは機能しません

于 2012-05-03T17:35:48.907 に答える