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

我有一个iPhone应用程序和一个iPad应用程序，都在UIWebView中运行相同的Web代码。网页代码是对PHP页面的调用，以获得一些HTML + Javascript到移动设备并将其显示在框架中。此代码的目的是与聊天服务器进行交互。iPad上的溢出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>

当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问题的文章，但没有一个建议的解决方案有所帮助。

任何想法可能是错误的将不胜感激！

THX

奥弗

更新＃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>

来源

2012-03-17 oferbar

只是为了记录在案，事实证明，这个问题是在iPad应用程序和它实现滚动的方式（我不拥有该代码，只是Web部件）。一旦所有者修复了应用程序，事情就像预期的那样开始工作。

无论如何，感谢所有回答我的问题的人，非常感谢！

来源

2012-03-20 10:32:01 oferbar

尽量使主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">

来源

2012-03-17 02:22:22

嗨，不幸的是，这并没有改变，同样的行为。谢谢！ – oferbar 2012-03-18 14:25:53

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

祝你好运。

来源

2012-03-17 03:50:23 Eamonn

感谢您的回复！我已经尝试过创建DOM元素，但它没有做出改变，同样的问题。我还注意到，如果我有15行或更少的文本（不完全填充内容区域），则随后的文本插入可以正常工作。然而，滚动不起作用:(所以它是文本或滚动...另一个有趣的事情是，如果我通过在iPad上使用Safari在IFRAME包装器中运行相同的代码，事情完美无缺。在代码中嵌入代码我会在这里发布更多的代码谢谢！ – oferbar 2012-03-18 14:49:55

我会尝试这个中间步骤，看看不打与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);

来源

2012-03-17 04:30:41

嗨，感谢您的回复，这根本不起作用，我也在IE9和Chrome上测试，并且不支持createDocumentFramgement（），所以我可以甚至在我的桌面上测试 – oferbar 2012-03-18 14:43:37

自IE6以来，document.createDocumentFragment一直受到支持，如果它真的不起作用，可能需要确保某人没有做过像覆盖全局（窗口）文档属性这样的傻事。可以像在全局（窗口）上下文中声明一个名为'document'的变量一样简单。我的意思是在没有'var'声明的任何函数中，或者在没有var的情况下打开。相信当我说任何nuking文件如果你想使用其他人的JS，那么这个财产将长期导致你严重的问题。 – 2012-03-21 16:33:50

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

回答

相关问题