Question

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

编辑：

好吧，现在我认为它实际上不是一个bug，而是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不会将长字断成行，而是添加一个水平滚动条。而其他浏览器确实将它们分成了几行。此外，浏览器渲染它，以便仅为了那些长词添加滚动，而其余内容占据相同的宽度......然后我得到了线索！

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

Answer 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将在设置之前更新。

这是Opera的错误吗？

1 个答案: