html - i 标签的差异行为 IE/Chrome

Question

我在 Internet Explorer 和 Google Chrome 之间有一些行为差异。

我有一张带有“i”标签的表格。在这个标签中，我有 2 个字母:E + F

在 Internet Explorer 上:如果我将鼠标悬停在“X”或“F”上 --> 它们会显示为蓝色。这对我来说没问题。

在 Google Chrome 上:如果我将鼠标悬停在“X”上 --> 没有任何反应。 (只有'F'可以)

如何调整 css 使其具有与 IE 相同的行为？

这是 jsfiddle:http://jsfiddle.net/Kvehr/2/

<table class="search-transport">
  <tbody>
   <tr>
       <td><input type="checkbox" value="0"/></td>   
       <td>A1</td>
       <td><i class="icon-flag-3">F</i></td>
       <td>A2</td>
    </tr>
    <tr>
       <td><input type="checkbox" value="0"/></td>   
       <td>B1</td>
       <td><i class="icon-flag-3">F</i></td>
       <td>B2</td>
    </tr>
  </tbody>
</table>

.icon-flag-3:before {
    content: "X";
}

谢谢。

Answer 1

正如我在评论中提到的，这似乎是一个 IE 错误。

我建议按如下方式更改您的 HTML:

[...]
<td class="has-icon-flag-3"><i class="icon-flag-3">F</i></td>
[...]

还有你的 CSS:

.has-icon-flag-3:hover i { color: blue }

此外，让您的 CSS 不那么严格。 Here's a fiddle .