z-index在iPad和Google Chrome上未正確呈現22

我附上了兩張圖片，第一張顯示了我正在使用的webapp的「桌面」，一些圖標顯示爲由<div/>組成的開放對話框，其中包含<iframe/> ，但在正常的PC上，它都能正常工作，在iPad上，似乎有一些元素的Z-index存在問題，如第二張圖所示。z-index在iPad和Google Chrome上未正確呈現22

紅色小輪與數內的定義如下：

.countComunicazioni { 
    position: relative; 
    background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center; 
    height: 35px; 
    width: 35px; 
    color: #FFF; 
    top: -105px; 
    left: 120px; 
    z-index: 0; 
    font-weight: bold; 
    display: none; 
} 
.countComunicazioni p { 
    margin-top: -5px; 
    padding-top: 10px; 
}

標記是一個<div class="countComunicazioni"/>標籤和<p/>標籤內。

我也注意到，現在的問題也出現在谷歌瀏覽器V22，在紅色圓圈中的數字總是在最前面，即使它們具有的z-index == 0和對話具有的z-index> 1000

根據這個錯誤報告（http://code.google.com/p/chromium/issues/detail?id=144518），這個改變似乎是有意的，即使我敢打賭它會打破許多佈局，不僅僅是我們的。

此問題在以前版本的Google Chrome瀏覽器中不存在，也不存在於Firefox V15或Internet Explorer V9中，其中一切都呈現問題。

這個問題怎麼解決？我不是CSS專家，所以我必須承認，到目前爲止，我已經嘗試了很少，如果有的話......還有，誰在這裏「正確」？我們的標記不正確，還是問題出在谷歌瀏覽器新的呈現策略？

web-app desktop