javascript - 奇怪的行为变化 - Windows 8.1 中的 <textarea>

Question

我们的应用程序是适用于 Windows 8 的 HTML5/WinJS Google Talk 应用程序。我们有一个用于聊天输入的文本区域。我们有一个最大高度，我们以编程方式将高度设置为最大。

因此，在达到最大值后，它会将 overflowY 设置为滚动。这一直很好用。然而，当我们在 Windows 8.1 上测试我们的应用程序时，出现了一个问题。每当我们输入 oninput ，每输入一个字符，高度就会增加 3px。因此，当您键入时，框会不断变大，即使它只有 5 个字母并且不需要换行。由于某种原因，scrollHeight 或高度未正确更新。

<textarea class="inputField" id="inputField" placeholder="Type your message"></textarea>

onMessageInput: function (e) {
        e.target.style.height = (e.target.scrollHeight - 5) + "px";
        if (e.target.clientHeight >= 350) {
            e.target.style.overflowY = "scroll";
        }
        else {
            e.target.style.overflowY = "hidden";
        }
  }.bind(this)

那是绑定(bind)到oninput的函数。我们说如果客户端高度超过350px，就设置为滚动。

  .inputField {
            -ms-grid-row: 2;
            -ms-grid-column: 2;
            font-size: 19px;
            height: 30px;
            min-height: 30px;
            max-height: 350px;
            overflow: hidden;
        }

我们设置了“- 5”，因为出于某种原因，scrollHeight 似乎总是大了 5 像素。这是我们对此的 hacky 解决方案。 8.1好像高了8px。但是(在 8.1 中)当我们清除文本字段(Ctrl-A 然后按 Backspace)时，它不会重置文本区域的高度，但它在 Windows 8 中会重置。

我认为我们以错误的方式处理 JavaScript 方面的问题，并且完全愿意接受建议。

如果我可以提供更多信息，请告诉我!

Answer 1

我注意到 Windows 8 的 javascript 会导致 css 之间发生很多冲突。我正在开发一个应用程序，其中一半时间我只是尝试修复由冲突的 css 或全局变量引起的视觉错误。您是否正在使用各种 css 文件并在它们之间声明相似的名称？ (例如，假设您在其中声明了 file1.css 和 .inputField，而在此页面中您有 file2.css with.inputField 声明了不同的属性)