FireFoxのテキストエリア内にテキストを配置

私はdiv内の同じテキストでテキストエリアにテキストをオーバーレイしようとしています。私はFireFox（私は8.0を使用しています）以外のすべてのブラウザで動作させることができました。 FireFoxでは、テキストエリア内のテキストが1ピクセル左にシフトされます。私はあなたが最初にあなたのコードを適用し、すべてのブラウザファクトリー・プロパティーのリセットを使用することをお勧めFireFoxのテキストエリア内にテキストを配置

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style> 
div, textarea 
{ 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    margin: 0px; 
    padding: 0px; 
    font-family: Consolas; 
    font-size: medium; 
    border:none; 
    border-width: 0px; 
} 
div {color:red;} 
textarea {color: blue;} 
</style></head> 

<body> 
<textarea>Stuff</textarea> 
<div>Stuff</div> 

</body> 
</html>

出典

2011-11-28 ulu

Firefoxがテキストエリアをどのようにレンダリングしているので、Firefox専用の特別なCSSが必要です。 – Hossein

これは明らかにしばらくの間、問題がありました。http://stackoverflow.com/questions/4374537/how-to-force-firefox-to-render-textarea-padding-the-same-as-in-a-div実証する。実際にそこにリストされた良い解決策もありませんでした。 – ScottS

ブラウザのスニッフィングに戻らなければならないように見えます。古き良き時代のように.. – ulu

私はこれについて最も洗練されたソリューションを主張することができると思います。 Firefoxはテキスト領域から1ピクセル減算するのではなく、半ピクセルの1つを減算します。 Firefoxの、クロム、オペラ、およびSafariの最新バージョンでテスト

http://jsfiddle.net/e4YGW/19/

：これを見てください。

出典

2011-12-01 20:56:24

見栄えは良いですが、それはテキストの最初の行でのみ機能することを意味しますか？ – ulu

ええ、それは最初の行でのみ動作します。良いキャッチ。シンプルな修正方法ですが、単に 'text-indent'の代わりに' margin-left'を使うと良いでしょう。テストケース：http://jsfiddle.net/e4YGW/19/ –

：

は、ここに私のコードです。これにより、さまざまなブラウザで表示の違いが生じる可能性が大幅に低減されます。

http://meyerweb.com/eric/tools/css/reset/

はまた、私はあなたがあなたのテキストエリアとまったく同じ大きさと位置の相対を持っているコンテナ内のあなたのdiv要素の両方を包むお勧め：ここ

は、最も有名なリセットの一つのリンクです。次に、内部要素に絶対的なプロパティを適用します。

出典

2011-12-01 18:20:03 borisrorsvort

すべてのこと、運がいいわけではありません。実際には、line-height：1を追加するとちょっと甘やかされました。 – ulu

FireFoxのテキストエリア内にテキストを配置

答えて

関連する問題