iPad上的div溢出无法正常工作

Question

我有一个iPhone应用程序和一个iPad应用程序，它们都在UIWebView中运行相同的Web代码。 Web代码是对PHP页面的调用，以将一些HTML + Javascript带到移动设备并显示在框架中。 此代码的目的是与聊天服务器进行交互。

HTML包含DIV：

<div id="messageContainer" style="width: 768; height: 310;  border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch">
</div>

当javascript代码从服务器获取一行数据时，它只是将其添加到div中：

function addPost(data) {
    var e = document.getElementById("messageContainer");
    var post;
    if (typeof(data) == "object")
    {
        post = "<div dir='ltr'><span style='color: rgb(183,226,76)' >" + 
                data.displayName + "</span>&lrm;: " + 
                "<span >" + data.msg + "</span><BR/></div>";
    } else {
        post = data + "<BR/>";
    }

    e.innerHTML = post;
    e.scrollTop = e.scrollHeight;
}

因此，滚动div中的文本以保持可见。

iPhone和iPad都在运行iOS 5。

该应用程序可以在iPhone上完美运行！

但是，在iPad上，大约20到25行数据之后，div不再显示新文本。 我检查了innerHTML的值，它的确包含了新文本。 它只是拒绝显示它。 在这种情况下，我可以滚动文本，但是不能添加将显示的新文本。

我已经阅读了几篇有关iPad上滚动和innerHTML问题的文章，但是建议的解决方案都没有帮助。

任何关于可能出问题的主意将不胜感激！

谢谢

奥弗

更新＃1：

HTML主体为：

<body style="margin: 0px; height: <?=$chatWindowHeight?>;">
<div id="messageContainer" style="width: <?=$chatWindowWidth?>; height: <?=$chatWindowHeight?>;  border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch">
</div>

<IFRAME name="chatwindow2" id="chatwindow2" FRAMEBORDER="0" SCROLLING="NO" WIDTH="0" HEIGHT="0" src="ConnectToChat.php">Browser does not support iframes!</IFRAME>
</body>

Answer 1

尝试使主div的高度和宽度不固定，例如：

<div id="messageContainer" style="width: 100%; height: 20%;  border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch">

Answer 2

对于初学者来说，这不是使用DOM树来操作页面HTML的理想方法，而.createelement对您而言将更加容易。 至于我所知道的溢出，如果您在两台设备上运行相同的iOS版本，它们将运行相同版本的Web工具包，因此请尝试增加div的大小并检查overflow属性，以确保div边界没有隐藏内容。 这也很可能是屏幕分辨率或个性化问题（默认文本大小等），如果您要对div进行分层，则增加z-index属性以确保没有其他div位于其上。 如果您在此处发布完整的CSS和HTML，则可能更容易了解更多细节。

祝好运。

Answer 3

我将尝试执行此中间步骤，以查看是否不直接使用innerHTML击中流中的实际元素即可解决问题：

var innerHolder = document.createElement('div');
//not sure why you needed dir='ltr' but I'll let you setAttribute that if it's important

var post = "<span style='color: rgb(183,226,76)' >" + 
                data.displayName + "</span>&lrm;: " + 
                "<span >" + data.msg + "</span><BR/>"

innerHolder.innerHTML = post;

innerHolder = document.createDocumentFramgement().appendChild(innerHolder);
//Now innerHTML has been handled on an object that isn't affecting flow yet.

while (e.firstChild) { //empty e out
    e.removeChild(element.firstChild);
}

e.appendChild(innerHolder);

Answer 4

仅作记录，事实证明问题出在iPad应用程序中以及它实现滚动的方式（我不拥有该代码，只是Web部件）。 所有者修复了应用程序后，一切就会按预期开始。

无论如何，感谢所有回答我的问题的人，不胜感激！

iPad上的div溢出无法正常工作

问题描述

4 个解决方案

解决方案1
0 2012-03-17 02:22:22

解决方案2
0 2012-03-17 03:50:23

解决方案3
0 2012-03-17 04:30:41

解决方案4
0 已采纳 2012-03-20 10:32:01

iPad上的div溢出无法正常工作

问题描述

4 个解决方案

解决方案1 0 2012-03-17 02:22:22

解决方案2 0 2012-03-17 03:50:23

解决方案3 0 2012-03-17 04:30:41

解决方案4 0 已采纳 2012-03-20 10:32:01

解决方案1
0 2012-03-17 02:22:22

解决方案2
0 2012-03-17 03:50:23

解决方案3
0 2012-03-17 04:30:41

解决方案4
0 已采纳 2012-03-20 10:32:01