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

Question

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

我有一张带有“i”标签的桌子。在这个标签中，我有 2 个字母：E + F

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

在谷歌浏览器上：如果我将鼠标悬停在“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 不那么严格。这是一个小提琴。