提示無法正確IE

如果你將鼠標懸停在帶有下劃線的表格標題上this page顯示，工具提示出現提示無法正確IE

alt text

然而，在IE7，工具提示出現大約300像素高於其預期的位置，在第一張桌子上，他們根本沒有出現。

alt text

另外，工具提示未作爲很好風格在IE中，例如所示，當角不圓化，並且不顯示陰影。我並不太在意樣式，但是我想讓工具提示顯示在正確的位置。

我使用YACOP JQuery plugin來顯示工具提示（我已經稍微修改了這個插件以消除衰落效果）。適用於每個工具提示的CSS樣式：

.callout { 
    max-width: 400px; 
    padding: 5px; 
    border: 1px solid #7992B0; 
    background-color: #FFE8A4; 
    border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    box-shadow:   5px 5px 10px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); 
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); 
}

來源

2010-11-08 Dónal

IE <版本9不支持本機或供應商特定的CSS3規則類似圓角或陰影。

對於IE7的問題，建立了IE7有針對性的CSS或者使用條件註釋

<!--[if IE 7]> 
.callout_main 
{ 
     position: absolute; 
     display: none; 
     margin: 0px; 
     left: 576.5px; 
     top: -66px;

}

還是CSS browser selector和重新定位標註div與CSS。第一個表格的工具提示似乎沒有出現，因爲它位於頁面頂部之上，因此位於瀏覽器上方的「渲染視圖」。

更新：

在回答你的問題，有：<div class="callout_main" style="...">我想這些內嵌樣式移動到一個CSS文件，並在IE瀏覽器/規則的改變top: 366px;到top: -66px;。我認爲，這將有助於解決您的問題:)

來源

2010-11-08 09:06:45 Kyle

感謝您的答案/您能否展示一個示例，說明如何使用CSS將工具提示300px向下移動到頁面上？ – 2010-11-08 09:26:39

我更新了我的回答:) – Kyle 2010-11-08 09:38:37


.callout { 
    max-width: 400px; 
    padding: 5px; 
    border: 1px solid #7992B0; 
    background-color: #FFE8A4; 
    border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    box-shadow:   5px 5px 10px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); 
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); 
}

您使用的WebKit和Mozilla的CSS屬性，那些開始-webkit和-moz。這些在IE 6,7,8（或之前的版本）上不起作用，因爲它們缺少CSS 3支持。有一天，所有的瀏覽器都會支持CSS3，但現在，你必須使用一些解決方法（可能），或者強制用戶使用不是IE的東西（取決於你的用戶），如果你想要的話一個漂亮的tooltop。

存在一個compatibilty master table，它會通知您可以在各種瀏覽器上使用和不能使用的內容。

來源

2010-11-08 09:17:04 darioo

提示無法正確IE

回答

相關問題