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