IE8 CSS 选择器~（波浪号）只处理第一个元素答案

【问题标题】：IE8 CSS selector ~ (tilde) addresses only first elementIE8 CSS 选择器~（波浪号）只处理第一个元素
【发布时间】：2013-06-11 01:54:32
【问题描述】：

IE 8 将仅处理第一个工具提示元素“a[data-tooltip="sk_5 ...”，而不是前面的。

HTML：

<div class="skcontainer">
   <a class="specialClassifications classification classfication_6" href="/de/ueberuns/romantik-siegel" data-tooltip="sk_6"></a>
   <a class="specialClassifications classification classfication_9" href="/de/ueberuns/romantik-siegel" data-tooltip="sk_9"></a>
   <a class="specialClassifications classification classfication_112" href="/de/ueberuns/romantik-siegel" data-tooltip="sk_112"></a>
   <a class="specialClassifications classification classfication_8" href="/de/ueberuns/romantik-siegel" data-tooltip="sk_8"></a>
   <div class="sks sk_5"><span class="inner"><p>'Gelber Schlüssel' für Romantik Hotels &amp; Restaurants mit luxuriösem Angebot. Für Gäste, die höchste Ansprüche an Stil, Ambiente, Genuss und Gastlichkeit stellen.</p></span></div>
   <div class="sks sk_6"><span class="inner"><p>TEXT</p></span></div>
   <div class="sks sk_7"><span class="inner"><p>TEXT</p></span></div>
   <div class="sks sk_8"><span class="inner"><p>TEXT</p></span></div>
</div>

这是 CSS：

.sks {visibility:hidden; position: absolute; z-index: 100}
a[data-tooltip]:before {content: ""; position: absolute; visibility: hidden}
a[data-tooltip]:hover:before, a[data-tooltip="sk_5"]:hover ~ .sk_5,
a[data-tooltip="sk_6"]:hover ~ .sk_6, a[data-tooltip="sk_7"]:hover ~ .sk_7,
a[data-tooltip="sk_8"]:hover ~ .sk_8, a[data-tooltip="sk_9"]:hover ~ .sk_9,
a[data-tooltip="sk_10"]:hover ~ .sk_10, a[data-tooltip="sk_11"]:hover ~ .sk_11 {visibility: visible}

任何（仅限 CSS）想法或提示？非常感谢！

【问题讨论】：

嗨，欢迎使用 SO，并祝贺您使用相关代码提出了一个很好的问题。与人们分享问题的一个好方法是将您的代码放在 jsfiddle => jsfiddle.net
你能把整个代码放在 jsfiddle 中吗？我不确定你是否想达到我认为的目标。顺便说一句，当我打开 IE 8 时，它甚至无法正确启动 jsfiddle：DDD
请解释您要实现的目标以及为什么要使用看起来很奇怪的代码。您的 a 元素内容为空，并且您有标记错误（尝试在 span 中使用 p）。像sk_6 这样的类名建议你应该采取不同的方法。
我试过了，但不支持 IE8。不管怎样，我们走吧。请注意我无法在那里测试它：jsfiddle.net/mikeg/WL9Sn/9 THX 4 支持
HTML 不是我自己编写的。由于仅使用 CSS 方法，我重写了 CSS，并清理了 HTML 以获得更好的可读性。目的是悬停由 a 封装的图像以显示工具提示。无法更改 HTML ...

标签： css internet-explorer-8 css-selectors tooltip

【解决方案1】：

因为波浪号是 CSS3 选择器，it is buggy in IE7 & 8。考虑使用Modernizr 来弥补 IE8 的 CSS2 功能和现代 CSS3 选择器之间的差距。

根据其余的 cmets 进行编辑： 如果您正在考虑放弃对 IE8 的支持，请先检查您的分析，以确保不会有太多人受到影响。如果波浪号选择器 + css 工具提示不起作用，您应该确保为链接添加标题，以便 IE 中的人仍然可以看到 [不可否认的丑陋] 工具提示。

【讨论】：

IE7 和 IE8 中的 bug 与 CSS3 完全无关。相邻兄弟选择器+ 是 CSS2 的一部分，在 IE7 中存在相同的注释节点错误。
谢谢，好点子。好吧，至少我们可以同意，虽然 IE8 可能支持一些 CSS 选择器，但它仍然是一团糟。可能需要一些 JS 来让它稍微少一点失败。
我检查了兼容性，但没有考虑 lt IE9 的错误选择器支持。我的决定是基于使用数据，整体功能也将得到保证。工具提示甚至不会在 IE 上弹出。但我很高兴你们所有人都帮我...