箱尺寸：如何在Firefox中擺脫滾動條填充

這裏有一個示例代碼：箱尺寸：如何在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>

我用箱大小屬性來設置textarea的寬度爲100％，加上一些填充和它的工作原理在所有主流瀏覽器中。但是，在Firefox中，如果向textarea添加更多內容，則會在滾動條周圍看到不需要的填充。

來源

2011-12-31 Mori

Firefox不僅適用於內容，而且適用於滾動條。

更改textarea樣式定義，以便它的內容是這樣的：

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

這校正了填充問題，但一旦有文本的兩個或多個行會顯得有點尷尬。

來源

2011-12-31 17:34:46

感謝您的回答，但行高太多，正如您所說，看起來很尷尬！ – Mori 2011-12-31 17:42:05

箱尺寸：如何在Firefox中擺脫滾動條填充

回答

相關問題