这是 Opera 的错误吗？

Question

这是 Opera 的错误吗？请将这个 jsfiddle jsfiddle.net/n5hBf/1 与这个 jsfiddle.net/n5hBf/2 进行比较，您应该会看到高度的差异。这两个 jsfiddle 是相同的，除了在第一个 jsfiddle 中我在一个语句中设置样式，在第二个 jsfiddle 中我一个接一个地设置它们。这在其他浏览器中运行良好，但在 Opera 中则不然，因此您肯定需要最新的 Opera 才能看到我正在谈论的内容。

编辑：

好吧，现在我认为这实际上不是一个错误，而是 Opera 处理自动换行的方式。它与其他浏览器（例如 FF、Chrome 和 IE）中的工作方式不同。如果您将 word-wrap:break-word; 添加到 textarea 元素，您就会明白我的意思：http://jsfiddle.net/n5hBf/5/

编辑2：

问题： 比如说，如果我们有一个大小为 100x100 的 textarea 元素，并且包含太多文本而无法容纳在 textarea 元素中，则文本将溢出，从而使滚动条出现。

目标： 在这两个 jsfiddles 中，我试图将 textarea 元素扩展到足够大的大小以容纳内容，而不需要滚动条。

错误的解决方案： 第一个 jsfiddle 在 Opera 中表现不佳，因为它超出了所需的高度。第二个 jsfiddle 在 Opera 中运行良好（这意味着它将其大小更改为内容所需的实际尺寸；不多不少），尽管 Opera 中的结果与我在其他浏览器中观察到的结果不同。在其他浏览器中，只有高度发生了变化。 Opera 中的结果更宽，因为它改变了宽度和高度。

理解： 正如我所发现的，默认情况下 Opera 不会将长单词分成行，而是添加一个水平滚动条。而其他浏览器确实将它们分成几行。另外，浏览器渲染它，以便仅为了那些长单词而添加滚动，而其余内容占据相同的宽度......然后我得到了线索！

正确的解决方案： 据我所知，内容的实际尺寸是根据初始文本区域的大小定义的，因此一旦我们更改了其中一个尺寸，另一个尺寸就会无效。也就是说，如果我们更改宽度，则高度不再是实际的，因为内容会扩展到新的宽度，从而使其高度变短。这解释了为什么第二个 jsfiddle 按预期工作：首先我获得了新的宽度并应用了它，然后内容占据了新的尺寸，只有在那之后我才获得了新的高度并应用了它。所以，如果我们需要同时改变宽度和高度，我们需要先改变宽度，然后再改变高度。在 Opera 以外的浏览器中，只需要更改一个维度，因此无论是在第一个 jsfiddle 中的一个语句中更改样式，还是在第二个 jsfiddle 中的两个语句中更改样式，都没有区别。

Answer 1

它在 Opera 中中断的唯一原因是它是唯一在文本区域上默认不使用 word-wrap:break-word 的浏览器。所以这不是一个错误，只是不同的默认样式的结果。

如果您将 word-wrap: normal 添加到小提琴中的 textarea CSS a> 它会在其他浏览器中以相同的方式中断（除了在 IE 中，它以不同的方式中断）。

如果没有 word-wrap:break-word，宽度与 scrollWidth 不同，这意味着更改它会影响 scrollHeight。

但是，通过这样做，

$textarea.css({ 
  width: $textarea[0].scrollWidth, 
  height: $textarea[0].scrollHeight 
});

scrollWidth 和 scrollHeight 在实际设置之前都会先进行评估。这意味着不会考虑因更改宽度而导致的 scrollHeight 变化。

在单独的 .css() 语句中依次设置宽度和高度意味着 scrollHeight 在设置之前就已更新。