1

我有一个固定高度的 div，其中包含一个子文本区域，也具有固定高度。

在 chrome 中，如果 div 和 textarea 的高度相同，则 div 将有一个滚动条（如果设置为 overflow:auto ）。这在 Firefox 中不会发生，如果嵌套两个 div 元素也不会发生。

这是一个简单的例子：

<div style="height:100px; margin:0; padding:0; overflow:auto">
    <textarea style="height:100px; margin:0;padding:0;border:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue metus, pulvinar in accumsan ut, malesuada quis sapien. Curabitur eleifend massa ac arcu congue, eu aliquet enim porta. Integer tristique tristique placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum, arcu eget pulvinar sodales, quam metus pharetra felis, vel commodo enim eros a eros. Maecenas placerat ullamcorper odio, et viverra tellus tempor non. Proin iaculis non eros id convallis. Nullam tellus mauris, congue ut laoreet sit amet, mollis tempus lacus. Duis lacinia commodo convallis. Suspendisse mollis lectus a tristique mattis. Nullam gravida dictum purus a sagittis. Cras in sapien nec nulla porta consequat.
    </textarea>
</div>

在小提琴中：http: //jsfiddle.net/MBn7Y/

如果您将 textarea 元素替换为具有相同内容和属性的 div，则问题不存在。

我想知道为什么会这样。将溢出设置为隐藏会删除 div 的滚动条，但我的特殊情况有点复杂，隐藏溢出看起来不太好。

我的 firefox 版本是 24.0，chrome 是 29.0.1547.76，两者都在 linux mint 13 上运行。我在 chromium 28.0.1500.71 上也有同样的问题

提前感谢任何有解释的人！

编辑：

这是小提琴的屏幕截图：http: //i.imgur.com/CcW2pAK.png

我希望删除最右边的滚动条，而不是 textarea 的。由于文本很长，因此 textarea 获得滚动条确实是正常的。我不明白为什么父 div 也有滚动条？

该问题也仅发生在内联样式中，如果您使用类设置大小，则问题不会发生。（例如：http: //jsfiddle.net/KPjak/）

在我的情况下，高度由 javascript 设置并且是可变的，因此类不是解决方案。

4

3 回答 3

2

我会说它与底部边距或与在 css 之外应用的 textarea 的填充有关。至于为什么会发生这种情况——不知道，问你父亲。

它似乎是 5% 的边距或填充。看我的小提琴。 http://jsfiddle.net/MBn7Y/6/

我将高度调低，%直到它没有显示父级中的卷轴，达到 95%；

上一个版本margin-bottom: -5%;在匹配父元素的全高时显示和工作。

**CSS**
textarea {
    margin-bottom: -5% !important;
}
于 2013-11-06T16:43:03.120 回答
2

好的，我找到了这一切的原因。这里 webkit 中报告了一个错误：https ://bugs.webkit.org/show_bug.cgi?id=32731

可以在这里找到解释：

关于 CSS，an<textarea>是一个被替换的元素。HTML 规范没有定义 a 的基线在哪里<textarea>。所以不同的浏览器将它设置到不同的位置。对于 Gecko，<textarea>基线设置在 textarea 第一行的第一行的基线上，在另一个浏览器上它可能设置在<textarea>框的底部。不要在其上使用垂直对齐：基线，因为行为将是不可预测的。

一种解决方案是将文本区域设置为显示：块在此处找到

或者将父级的行高设置为 0在这里找到

非常感谢所有帮助我找到答案的人！

于 2013-11-06T17:03:58.273 回答
0

您可以使用以下 CSS 片段来定位滚动条的删除：

element::-webkit-scrollbar { 
    display: none; 
}

我在下面的小提琴中复制了这个（不得不用类替换一些内联样式）：http: //jsfiddle.net/MathiasaurusRex/MBn7Y/3/

于 2013-11-06T16:15:31.970 回答