Css 框大小：如何消除Firefox中的滚动条填充_Css

Css 框大小：如何消除Firefox中的滚动条填充

css

Css 框大小：如何消除Firefox中的滚动条填充,css,Css,下面是一个示例代码： <!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%; m

下面是一个示例代码：

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


示例文本区域
*{宽度：100%；高度：100%；边距：0；边框：0；填充：0；背景：#d3d3；}
text区域{溢出：自动；框大小：边框框；-moz框大小：边框框；填充：6px；}
这是一些文本。

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

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

更改

textarea

样式定义，使其如下所示：

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

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

谢谢您的回答，但行高太高，正如您提到的，看起来很尴尬！