参见英文答案 >
How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?4个
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Chrome中的结果：
结果FF：
解决方法
尝试在textarea上显示：block：
<!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这样的东西可以帮助所有新的浏览器达到一致的标准.
