参见英文答案 >
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中的结果:
删除死亡的ImageShack链接
结果FF:
删除死亡的ImageShack链接
解决方法
尝试在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这样的东西可以帮助所有新的浏览器达到一致的标准.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。