13 webkit textarea margin wrapper
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Chrome中的结果:
删除了死的ImageShack链接
结果为FF:
删除了死的ImageShack链接
M2t*_*2tM 32
尝试显示:textarea上的块:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {display:block;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
问题是textarea是内联的,它使用文本高度添加一些额外的填充.您还可以指定:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;line-height:0px;font-size:1px;">
<textarea></textarea>
</div>
</body>
</html>
如果你想让textarea保持内联并且不想弄乱父块的字体属性,那么另一个选项是有用的(我建议使用以前的line-height方法):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {vertical-align:middle;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
最后,如果您真的担心浏览器之间的一致性,请记住边距和其他类似的东西可以在不同的浏览器中使用不同的默认值进行定义.利用YUI-Reset之类的东西可以帮助所有新浏览器达到一致的标准,您可以从中构建.
小智 8
将显示模式设置为阻止对我来说是个窍门.只是为了澄清,这是您需要添加到样式表的声明.我建议首先将它添加到您的重置或规范化样式表.
textarea {
display:block
}
| 归档时间： |
|
| 查看次数： |
8817 次 |
| 最近记录： |