1

非常に基本的なツールチップ用の単純な CSS/HTML があります。

    <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 では正常に動作しますが、他のすべてのレイアウトが壊れているようです。Doctype を必要としないという理由で、Doctype を使用したことがありません。これまでは、3 つのブラウザすべてでレイアウトは問題ありませんでした。

ツールチップが Internet Explorer (doctype なし) または同様のツールチップ CSS メソッドで機能するように、CSS に変更できるものはありますか? -javascript を優先しない。

私の問題を十分に説明できたことを願っています、ありがとう。

4

1 に答える 1

5

さて、今後の新しいレイアウトでは Doctype を使用する必要があります。2012 年末に近づいています。doctype を持つことは、最近ではかなり必要とされています。1 つは、ブラウザー間の一貫性を確保することです。ご覧のとおり、他のブラウザーのクワーク モードは標準モードに似ていますが、IE 独自のクワーク モードとは大きく異なります。

つまり、何らかの理由で quirks モードに準拠する必要がある場合は、 a の代わりにan を使用でき、IE でも問題なく動作します。<a href><span>:hover

<a href="#" class="tooltip">Thing which can be hovered on</a>
于 2012-12-04T02:46:32.160 に答える