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

Question

I've got an iPhone app and an iPad app, both running the same web code inside a UIWebView. 我有一个iPhone应用程序和一个iPad应用程序，它们都在UIWebView中运行相同的Web代码。 The web code is a call to a PHP page to get some HTML + Javascript to the mobile and display it inside a frame. Web代码是对PHP页面的调用，以将一些HTML + Javascript带到移动设备并显示在框架中。 The purpose of this code is to interact with a chat server. 此代码的目的是与聊天服务器进行交互。

The HTML includes a DIV: 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>

When the javascript code gets a line of data from the server, it simply adds it to the 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;
}

So the text in the div is scrolled to keep in view. 因此，滚动div中的文本以保持可见。

Both iPhone and iPad are running iOS 5. iPhone和iPad都在运行iOS 5。

The application works perfectly on the iPhone! 该应用程序可以在iPhone上完美运行！

However, on the iPad, aafter about 20-25 lines of data, the div no longer displays new text. 但是，在iPad上，大约20到25行数据之后，div不再显示新文本。 I checked the value of innerHTML, and it does indeed include the new text. 我检查了innerHTML的值，它的确包含了新文本。 It just refuses to display it. 它只是拒绝显示它。 I can scroll the text in that case, but can't add new text that will show. 在这种情况下，我可以滚动文本，但是不能添加将显示的新文本。

I've read several posts about problems with scrolling and innerHTML on iPad, but none of the suggested solutions helped. 我已经阅读了几篇有关iPad上滚动和innerHTML问题的文章，但是建议的解决方案都没有帮助。

Any idea on what might be wrong would greatly appreciated! 任何关于可能出问题的主意将不胜感激！

Thx 谢谢

Ofer 奥弗

UPDATE #1: 更新＃1：

The HTML body is: 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

For starters this is not the ideal way to manipulate the HTML of your page using the DOM tree and .createelement will be much easier for you. 对于初学者来说，这不是使用DOM树来操作页面HTML的理想方法，而.createelement对您而言将更加容易。 As for the over flow as far as i am aware provided your running the same iOS version on both devices they will be running the same version of web kit so try increasing the div size and check the overflow property to make sure the div boundaries are not hiding content. 至于我所知道的溢出，如果您在两台设备上运行相同的iOS版本，它们将运行相同版本的Web工具包，因此请尝试增加div的大小并检查overflow属性，以确保div边界没有隐藏内容。 This is most likely a screen resolution or personalisation issue (default text sizes etc.) also if you are layering divs increase the z-index property to make sure you dont have other divs sitting on top of it. 这也很可能是屏幕分辨率或个性化问题（默认文本大小等），如果您要对div进行分层，则增加z-index属性以确保没有其他div位于其上。 If you post the full CSS and HTML here it may be easier to take a look at in more specifics. 如果您在此处发布完整的CSS和HTML，则可能更容易了解更多细节。

Good Luck. 祝好运。

Answer 3

I would try this intermediary step to see if not hitting the actual elements in flow directly with innerHTML solves the problem: 我将尝试执行此中间步骤，以查看是否不直接使用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

Just for the record, it turned out that the issue was in the iPad application and the way it implemented scrolling (I don't own that code, just the web part). 仅作记录，事实证明问题出在iPad应用程序中以及它实现滚动的方式（我不拥有该代码，只是Web部件）。 Once the owner fixed the app, things started working as expected. 所有者修复了应用程序后，一切就会按预期开始。

Anyway, thanks to all who answered my question, much appreciated! 无论如何，感谢所有回答我的问题的人，不胜感激！

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