2

ここでフィドルを作りました。 http://jsfiddle.net/pmVer/

textareaとはdiv、Safari と Chrome の両方で同じようにレンダリングされます。しかし Firefox では、2pxの右側に追加のパディングがありtextarea、ワード ラッピングに影響します。

また不思議なのは、white-space: pre-wrap;この余分なパディングがないと、要素の幅によって異なるように見えることです。

FireFox を検出して に追加することpadding-right:2pxでこれを修正divできますが、ブラウザをハックせずに修正できるかどうかを知りたいですか?

CSS

div, textarea {
    font-family: Courier;
    font-size: 14px;
    margin: 0;
    padding: 0;
    outline: 0;
    resize: none;
    border: 1px solid black;
    width: 282px;
    height: 80px;
    white-space: pre-wrap;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

HTML

<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</textarea>
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</div>

編集

上記の例は幅が固定されているため、問題を確認できますが、このように幅を拡張するためにも必要です。 http://jsfiddle.net/pmVer/6/

4

2 に答える 2

0

そのためにリセット css を使用することもできます。

于 2013-05-13T09:16:05.907 に答える
0

Firefox 20.0.1これを使用すると、説明されている動作を再現できjsFiddleます。

少し調べてみましたが、Firefox では過去にテキストエリアとパディングの組み合わせでかなりの問題が発生していたようです。

ベンダー固有のプレフィックスをブラウザーのハックとして分類するかどうかはわかりませんが、1 つ用意しています。

-moz-padding-start: 2px;CSS ルールにとを追加すると-moz-padding-end: 2px;、ラッピングの問題が修正されます: jsFiddle.

于 2013-05-13T13:34:22.700 に答える