textarea的宽度问题

我只想把textarea为div，我认为它不应该是一个问题：textarea的宽度问题

CODE

.panel { 
 
    width: 250px; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    border: 1px solid #000; 
 
} 
 
.panel textarea { 
 
    width: 100%; 
 
}

<div class="panel"> 
 
    <textarea></textarea> 
 
</div>

这是一个非常困难的代码，不是吗？我们所有人都做了上千次。

由于某种原因，textarea的这个宽度在右侧有错误。检查盒子型号.panel似乎不错。

在FF，Chrome，Edge中试用过，结果无处不在。

有人可以解释我，为什么，它有什么解决方案？

我制作了jsFiddle只是为了好玩。

来源

2016-06-09 vaso123

问题是什么？是因为当你扩大文本区域时，它与容器重叠？如果是，只需将“overflow：hidden;”添加到面板。 –

我什么都不想要。我只想修复textarea的右侧。正如你所看到的，在右侧没有div的'10px'填充。 – vaso123

将'box-sizing：border-box;'添加到您的文本区域。 –

给<textarea>一个box-sizing: border-box应该修复它：

.panel { 
    width: 250px; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    padding: 10px; 
} 

.panel textarea { 
    display: block; 
    box-sizing: border-box; 
    width: 100%; 
}

JSFiddle

我还添加了display:block到textarea的，以消除对文字区域的底部边缘有些不一致（How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?）

来源

2016-06-09 13:55:34 Pandy

'display：block'没有做任何事 – dippas

我将它设置为'display：block;'以消除Firefox和Chrome添加到textareas底部的额外空间 - 尽管您是正确的，它与正确的填充问题。我会更新我的答案。 textarea填充不一致的参考：http://stackoverflow.com/questions/3453959/how-do-i-fix-inconsistent-textarea-bottom-margin-in-firefox-and-chrome – Pandy

你应该普遍适用box-sizing:border-box而不仅仅是div

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
.panel { 
 
    width: 250px; 
 
    padding: 10px; 
 
    border: 1px solid #000; 
 
} 
 
.panel textarea, 
 
.panel input { 
 
    width: 100%; 
 
}

<div class="panel"> 
 
    <textarea></textarea> 
 
    <input type="text" /> 
 
</div>

来源

2016-06-09 13:59:16 dippas

是的，很好 - 作为一个规则大拇指我通常在我的CSS文件的开始处为所有元素做一个“box-sizing：border-box”规则。我很少回到某些元素的'box-sizing'属性的浏览器默认值。 –

而不是尝试加入的0填充到您的文字区域，如箱大小的：边界框的结果不同，在某些浏览器。

.panel textarea{ 
width: 100%; 
padding:0; 
}

来源

2016-06-09 14:02:58 frnt

发生这种情况是因为默认textareas有填充和边框。当你将宽度设置为100％时，textarea实际上变为100％+填充左/右+边界左/右宽。将textarea设置为box-sizing：border-box将使填充/边框在指定宽度内而不是在其外部。

.panel textarea {width: 100%; box-sizing: border-box;}

这里有一个直观例子： https://css-tricks.com/examples/BoxSizing/

来源

2016-06-09 14:11:07 JeffreyPia

textarea的宽度问题

回答

相关问题