1

環境：

次のように構成された<input>要素があります。

HTML:

<div class="field field-3">
    <span><input type="text" placeholder="Username" name=""></span>
</div>


CSS:
(同じスタイルシートで Meyer によって書かれた reset.css スタイルシートを使用)

.field {
    padding: 20px 10px;
    position: relative;
    overflow: hidden;
}

.field > span {
    background-color: #fff;
    border: 1px solid #bbc3d3;
    float: right;
    padding: 8px 15px;
    position: relative;
}

.field > span input[type="text"] {
    background-color: transparent;
    border: 0 none;
    color: #9da3af;
    display: block;
    font-family: $font-open;
    @include font-size(12px);
    margin: 0;
    outline: 0 none;
    overflow: hidden;
    padding: 3px 0;
    resize: none;
    width: 838px;
    height: 22px;
}


グリッチ:

最初の画像に示されている入力要素のプレースホルダー。要素内をクリックして何かを書くと、テキストが 1 ピクセル下に移動します。

ここに画像の説明を入力

どこ？：

Google Chrome では不具合のみ表示される


質問:どうすればこれを修正して回避できますか?

アップデート

koala_web の提案です。例としてjsFiddle ( link ) を使用してください。
注:皮肉なことに、jsFiddle では問題は発生しませんが、グリッチが表示されるテンプレートの例 ( link ) へのリンクを配置しました。

4

2 に答える 2

1

style.cssファイルの 297 行目から line-height 宣言を削除してみてください

html, body, button, input, select, textarea {
font-size: 12px;
/*line-height: 1.231; remove this*/
}
于 2013-07-27T05:14:55.563 に答える