在浏览器中不一致的textarea处理 [英] Inconsistent textarea handling in browsers

问题描述

这里是我看到的标记下面提供的。没有一个浏览器将文本区域保存在容器中，这是不方便的，但不是那么大的问题。然而，令人讨厌的是，无论我做什么，我不能摆脱Chrome的textarea的底部边距。有任何建议吗？

这里是一个小提琴的一切： http://jsfiddle.net/radu/RYZUb/

标记：

 < div id =wrap > 
< textarea id =txtInputrows =6cols =20>< / textarea> 
< div id =test>< / div> 
< / div> 
  

CSS：

 code> #wrap 
 {
 background-color：green; 
 height：210px; 
 width：440px; 
} 
 #txtInput 
 {
 height：100px; 
 width：100％; 
 margin：0px; 
 padding：0px; 
} 
 #test 
 {
 background-color：gray; 
 height：100px; 
 width：100％; 
 margin：0; 
 padding：0; 
} 
  

解决方案

对于Chrome中的textarea，将 vertical-align：top 添加到 #txtInput 。

现场演示

现在您在列出的浏览器之间具有一致的呈现。

您要为 textarea

---

这修复了IE8，Firefox，Chrome，Safari，Opera。在IE7中无效：

现场演示

  #txtInput 
 {
 ：border-box; 
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
} 
  

这里，我们使用

p>也许有一种方法可以得到它完全正确的甚至IE7，但除非你真的关心这个浏览器，它可能是最好只是与它突出〜 3px 该浏览器中的容器。

Here's what I'm seeing for the markup provided below. None of the browsers are keeping the textareas in the container which is inconvenient but not that big of an issue. However, what is annoying is that no matter what I do I can't get rid of the bottom margin for the textarea in Chrome. Any suggestions?

Here is everything in a fiddle: http://jsfiddle.net/radu/RYZUb/

Markup:

<div id="wrap">
    <textarea id="txtInput" rows="6" cols="20"></textarea>
    <div id="test"></div>
</div>

CSS:

#wrap
{
   background-color:green;
   height:210px;
   width:440px;
}
#txtInput
{
    height:100px;
    width:100%;
    margin:0px;
    padding:0px;
}
#test
{
    background-color:gray;
    height:100px;
    width:100%;
    margin:0;
    padding:0;
}

解决方案

To fix "the bottom margin for the textarea in Chrome", add vertical-align: top to #txtInput.

Live Demo

Now you have consistent rendering between the browsers you listed.

Do you want a solution for the textarea extending outside the container?

---

This fixes IE8, Firefox, Chrome, Safari, Opera. Doesn't help in IE7 though:

Live Demo

#txtInput
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Here, we're using the box-sizing property.

There's probably a way to get it exactly right in even IE7, but unless you really care about that browser, it's probably best to just live with it protruding ~3px outside the container in that browser.

这篇关于在浏览器中不一致的textarea处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！