如何删除 div 包装内文本区域下方的边距 (webkit)

发布于 2024-09-28 20:35:10 字数 365 浏览 1 评论 0原文

 <!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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

滥情稳全场 2024-10-05 20:35:10

尝试在文本区域上显示:块:

 <!DOCTYPE html>
 <html> 
 <head>
      <style type="text/css">
           textarea {display:block;}
      </style>
 </head>
 <body>
      <div style="background-color:#f09;">
           <textarea></textarea>
      </div>
 </body>
 </html>

问题是文本区域是内联的,并且它使用文本高度来添加一些额外的填充。您还可以指定:

 <!DOCTYPE html>
 <html> 
 <head>
 </head>
 <body>
      <div style="background-color:#f09;line-height:0px;font-size:1px;">
           <textarea></textarea>
      </div>
 </body>
 </html>

如果您想保持文本区域内联并且不想弄乱父块的字体属性,则另一个选项很有用(我建议在之前使用行高的方法上使用此方法):

 <!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 之类的东西可以帮助所有新浏览器达到一致的标准,您可以建造。

Try display:block on the 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>

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:

 <!DOCTYPE html>
 <html> 
 <head>
 </head>
 <body>
      <div style="background-color:#f09;line-height:0px;font-size:1px;">
           <textarea></textarea>
      </div>
 </body>
 </html>

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):

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

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.

情绪操控生活 2024-10-05 20:35:10

将显示模式设置为阻止对我来说很有效。只是为了澄清一下,这里是您需要添加到样式表中的声明。我建议首先将其添加到您的重置或规范化样式表中。

textarea {
    display:block
}

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.

textarea {
    display:block
}
焚却相思 2024-10-05 20:35:10

我通常在我制作的每个 global.css 文件中都有一个“第一行”。
说:

<style>    
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th 
{
   margin:0;padding:0;border:none;
   font-familiy:"my sites default font";font-size:10px;
}
</style>

在此之后,当在 5 个不同的平台上进行测试时,我觉得我可以完全控制浏览器的行为:Chrome、Firefox、Safari、Opera 和... doh... Microsoft Internet Extracrap..

然后您可以轻松地做一些事情类似的 <输入>且<文本区域>也。
如果第一行做得太多,那么只需为“特殊情况”单独制作第二行。

<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>

请记住,CSS 是继承的,因此您可以对不同的类进行多个声明。

这能解决你的问题吗?

I usually have a "first line" in every global.css file I make.
saying:

<style>    
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th 
{
   margin:0;padding:0;border:none;
   font-familiy:"my sites default font";font-size:10px;
}
</style>

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.

<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>

Remember that CSS inherits, so you can have multiple declarations of different classes.

Does this remove your problem?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文