5

line-heightdivでプロパティを使用するcontenteditableと、2行目に移動すると、カレットが下にシフトします。これは、一部のカスタムWebフォントでより明確になりますが、Arialなどの標準フォントでも発生します。この動作の回避策はありますか?

これは最初の行にカレットを示しています

最初の行の通常のカレット
下にシフトした2行目のカレット

2行目のシフトされたカレット

動作のデモは次の場所にあります:http: //jsfiddle.net/sGgVR/

編集: Safari6.0.1およびChrome22.0.1229.94のテストに使用されるブラウザー

4

1 に答える 1

0

これに対するエレガントな解決策はありません。line-heightが a 未満の場合、font-size行が重なり、カーソルの上部が上部のテキスト ボックスによって切り取られます。

:first-line疑似要素が何らかの形で役立つかもしれませんが、試してみてください。しかし、ここではうまく活用できませんでした。

もう 1 つの厄介な方法は、JS を使用して複数行のテキストをいくつかの異なる要素に分割することです。もちろん、それぞれに contentEditable があります。そして、改行で新しい要素を作成し、バックスペースまたは削除でマージします。しかし、このソリューションは複雑すぎるようです

于 2012-10-24T19:50:05.790 に答える