这是一个 Opera 错误吗？答案

【问题标题】：Is this an Opera bug?这是一个 Opera 错误吗？
【发布时间】：2011-09-10 07:50:48
【问题描述】：

这是一个 Opera 错误吗？请将此 jsfiddle jsfiddle.net/n5hBf/1 与此 jsfiddle.net/n5hBf/2 进行比较，您应该会看到高度的差异。这两个 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 中的两个语句中更改，都没有区别。

【问题讨论】：

老实说，当我想到这一点时，Opera 似乎可以正常运行，而其他浏览器已损坏。
@sharth，你到底为什么这么认为？
因为它不会将那么长的“ggg...”字换行到下一行，而其他浏览器会这样做？
什么意思？我在该网页上看不到 Firefox 和 Opera 之间的显着差异。 Opera 为我包装了“ggg...”。
@CodeInChaos，您使用的是 Opera 11.51 吗？我不知道以前的版本，但 Opera 11.51 并没有为我包装那么长的词。

标签： opera

【解决方案1】：

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

If you add word-wrap: normal to the textarea CSS in your fiddle 它将在其他浏览器中以相同的方式中断（IE 除外，它以不同的方式中断）。

没有word-wrap: break-word，宽度与scrollWidth不同，也就是说改变它会影响scrollHeight。

但是，通过这样做

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

scrollWidth 和 scrollHeight 在实际设置之前先进行评估。这意味着不考虑由更改宽度引起的scrollHeight 中的更改。

在单独的.css() 语句中一个接一个地设置宽度和高度意味着scrollHeight 在设置之前已经更新。

【讨论】：