0
好吧，所以我有這個問題，我無法弄清楚。我看過很多解決方案，但都沒有成功。 我正在使用一款嵌入式瀏覽器 - 據我所知，它的IE7。嵌入IE7瀏覽器工具提示問題
我將嵌入式瀏覽器鏈接到一個HTML文件。在我通過JavaScript生成HTML的基礎上通過軟件傳遞給瀏覽器控件的值。
我正在構建的HTML是一個圖形。
我有一個容納一切的容器div。 其中我有一個左浮動的div，保存圖的比例。 然後我有一個叫做圖的div，它將顯示數據。這個div是x可滾動的，並且留有餘量，因此它不會與範圍div重疊。 通過JavaScript構建HTML代碼，然後將圖形div的innerHTML設置爲新代碼。
我構建的代碼由一個列div組成。 在列div內有6個其他div絕對定位，並給出一個頂部以顯示它們與刻度垂直對齊，並基於傳遞給控件的值。
列數取決於發送值的數量，並且會改變。
所有這些工作正常，定位的div顯示在我想要它們的列內。
問題是我希望每個定位div都有一個顯示實際值的工具提示。 在我必須使用的瀏覽器控件中，這些工具提示總是出現在下一列中定位的div後面，我需要它們出現在所有內容之上。
在下面的示例中，工具提示顯示在右側列中數據的上方。 但是，在嵌入式IE7瀏覽器中，右側列中的數據出現在工具提示上方。
<style>
.container
{
width: 800px;
height: 600px;
background-color: #dfd;
overflow-x: scroll;
}
.scale
{
width: 100px;
height: 520px;
background-color: #fdd;
float: left;
}
.graph
{
width: 1000px;
height: 520px;
background-color: #ddf;
}
.column
{
width: 20px;
height: 520px;
float: left;
background-color: #fdf;
}
.value1
{
position: absolute;
width: 24px;
}
.value2
{
position: absolute;
width: 24px;
}
.value3
{
position: absolute;
width: 24px;
}
.tooltip span
{
display: none;
width: 100px;
background-color: #fff;
border: 1px solid #000;
position: relative;
z-index: 1;
}
.tooltip:hover span
{
display: inline-block;
position: absolute;
left: 24px;
z-index: 2;
}
</style>
<body>
<div class="scale">Blah blah</div>
<div class="container">
<div class="graph">
<div class="column">
<div class="value1" style="top: 100px;"><a class="tooltip" href="#">1a<span>tooltip data</span></a></div>
<div class="value2" style="top: 150px;">2a</div>
<div class="value3" style="top: 200px;">3a</div>
</div>
<div class="column">
<div class="value1" style="top: 130px;">1b</div>
<div class="value2" style="top: 160px;">2b</div>
<div class="value3" style="top: 180px;">3b</div>
</div>
<div class="column">
<div class="value1" style="top: 90px;">1c</div>
<div class="value2" style="top: 110px;">2c</div>
<div class="value3" style="top: 140px;">3c</div>
</div>
</div>
</div>
</body>
jsfiddle簡單的例子。
我試過改變位置：絕對和：在各種元素上的相對。我曾嘗試設置各種元素的z索引，結果總是相同的。工具提示出現在位於右側列的定位值後面。