IE問題：懸停HTML工具提示，需要一個DOCTYPE

我有一些簡單的CSS/HTML的一個非常基本的工具提示：IE問題：懸停HTML工具提示，需要一個DOCTYPE

<style type="text/css"> 
    .tooltip { 
     text-decoration: none; 
     position: relative; 
    } 
    .tooltip span { 
     margin-left: -999em; 
     position: absolute; 
    } 
    .tooltip:hover span { 
     border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
     position: absolute; left: 1em; top: 2em; z-index: 99; 
     margin-left: 0; width: 250px; 
    } 
    .custom { padding: 0.4em 0.4em 0.4em 0.8em; } 
    .info { background: #D5F1FF; border: 3px solid #2BB0D7; } 
    </style> 

<span class="tooltip">Thing which can be hovered on</a> 
<span class="custom info"> 
Text in tooltip goes here... 
</span></span>

這適用於Firefox和Chrome都很好，很明顯，但是當我嘗試它與Internet Explorer，工具提示只是不加載/工作...

然而，當我把一個DOCTYPE在頂部如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

它正常工作，在Internet Explorer中，但我所有的其他佈局的看到米打破，我從來沒有使用文檔類型，由於永遠不需要的原因。在這三種瀏覽器中，佈局都很好。

在CSS中有什麼可以改變的，所以工具提示可以在IE瀏覽器（沒有文檔類型）或類似的工具提示CSS方法中工作嗎？ -Pref不是JavaScript。

希望我已經解釋了我的問題，謝謝。

來源

2012-12-04 James Rattray

注：一點也沒有」如果它更容易，類'tooltip'可以代替，謝謝。 –

如果您使用IE測試哪個版本？ – Sablefoste

那麼，您將需要在新佈局中繼續使用文檔類型。接近2012年底;現在有一個文檔類型是非常需要的。首先，它可以確保瀏覽器之間的一致性：正如您可能已經看到的，其他瀏覽器的怪癖模式與其標準模式類似......並且與IE自己的怪異模式截然不同。

這就是說，你可以代替<span>的使用<a href>如果你一定要堅持怪癖模式無論出於何種原因，並:hover將在IE工作得很好：

<a href="#" class="tooltip">Thing which can be hovered on</a>

來源

2012-12-04 02:46:32 BoltClock

這裏強調的一件事，包括一個非空白的href屬性觸發了一些版本的IE來將錨*作爲錨*處理。 – svidgen

@svidgen：你的意思是像''？ – BoltClock

謝謝工作正常。我會看看我是否可以在未來的文檔中工作，謝謝你的建議。 –

IE問題：懸停HTML工具提示，需要一個DOCTYPE

回答

相關問題