2011-12-31 7 views
4

は、ここでのサンプルコードです:私は100%にテキストエリアの幅に加えて、いくつかのパディングを設定するには、ボックスのサイズ変更プロパティを使用し、それが動作 ボックスサイジングは:Firefoxでスクロールバーのパディングを取り除くためにどのよう

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Sample Textarea</title> 
<style type="text/css"> 
* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;} 
textarea {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px;} 
</style> 
</head> 
<body> 
<form action="#"> 
<textarea rows="1" cols="1">This is some text.</textarea> 
</form> 
</body> 
</html> 

すべての主要なブラウザで。しかし、Firefoxでは、テキストエリアにコンテンツを追加すると、スクロールバーの周りに不要なパディングが表示されます。

答えて

2

Firefoxはコンテンツだけでなくスクロールバーにもパディングを適用します。

、それはこのように読むように、あなたの textareaスタイル定義を変更し

textarea 
{ 
    overflow:auto; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    line-height:26px; 
    padding: 0; 
    padding-left: 6px; 
} 

これは、パディングの問題を修正しますが、テキストの2行以上があるいったんそれがややぎこちなくなります。

+0

回答ありがとうございますが、行の高さが大きすぎます。あなたが言ったように、それは扱いにくいようです! – Mori

関連する問題