如何删除 div 包装内文本区域下方的边距 (webkit)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Chrome 中的结果:
删除了无效的 ImageShack 链接
FF 中的结果:
删除了无效的 ImageShack 链接
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Result in Chrome:
removed dead ImageShack link
Result in FF:
removed dead ImageShack link
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
尝试在文本区域上显示:块:
问题是文本区域是内联的,并且它使用文本高度来添加一些额外的填充。您还可以指定:
如果您想保持文本区域内联并且不想弄乱父块的字体属性,则另一个选项很有用(我建议在之前使用行高的方法上使用此方法):
最后,如果您'我们真的很担心浏览器之间的一致性,请记住边距和其他类似的东西可以在不同的浏览器中使用不同的默认值进行定义。使用 YUI-Reset 之类的东西可以帮助所有新浏览器达到一致的标准,您可以建造。
Try display:block on the textarea:
The issue is that the textarea is inline and it is using the text height to add a bit of extra padding. You can also specify:
Another option which is helpful if you want to keep the textarea inline and don't want to mess with the parent block's font properties (I suggest this over the previous method with line-height):
Finally, if you're really worried about consistency between browsers keep in mind margins and other things like that can be defined with different defaults in different browsers. Utilizing something like YUI-Reset can help bring all new browsers to a consistent standard from which you can build.
将显示模式设置为阻止对我来说很有效。只是为了澄清一下,这里是您需要添加到样式表中的声明。我建议首先将其添加到您的重置或规范化样式表中。
Setting the display mode to block did the trick for me. Just to clarify, here is the declaration that you need to add to your stylesheet. I would recommend adding it to your reset or normalize stylesheet, in the first place.
我通常在我制作的每个 global.css 文件中都有一个“第一行”。
说:
在此之后,当在 5 个不同的平台上进行测试时,我觉得我可以完全控制浏览器的行为:Chrome、Firefox、Safari、Opera 和... doh... Microsoft Internet Extracrap..
然后您可以轻松地做一些事情类似的 <输入>且<文本区域>也。
如果第一行做得太多,那么只需为“特殊情况”单独制作第二行。
请记住,CSS 是继承的,因此您可以对不同的类进行多个声明。
这能解决你的问题吗?
I usually have a "first line" in every global.css file I make.
saying:
After this, I feel that I have full control of the browsers behaviour, when testing on 5 different platforms: Chrome, Firefox, Safari, Opera and ... doh... Microsoft Internet Extracrap..
Then you can easily do something similar for < input > and < textarea > too.
if the first line does too much, then just make a second line for the "special cases" alone.
Remember that CSS inherits, so you can have multiple declarations of different classes.
Does this remove your problem?