Question

以下是示例代码：

<!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>

我使用box-sizing属性将textarea宽度设置为100％加上一些填充，它适用于所有主流浏览器。但是，在Firefox中，如果向textarea添加更多内容，则会在滚动条周围看到不需要的填充。

Answer 1

Firefox不仅将填充应用于内容，还将滚动条应用于滚动条。

更改您的textarea样式定义，使其如下所示：

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

这可以纠正填充问题，但是一旦有两行或更多行文本，它就会显得有些尴尬。

Box-sizing：如何摆脱Firefox中的滚动条填充

1 个答案: