css - 替换 Internet Explorer 中的整个 div

Question

我已经找到了<div id="head">放置我用 CSS 制作的徽标的位置。唯一的问题是它在 Internet Explorer 中不起作用。所以我想问一下，如果在 Internet Explorer 中打开，是否有任何方法可以用另一个 div 替换整个 div。我想<div id="headIE">在 Internet Explorer 中使用该徽标的图像打开，而不是使用在其中不起作用的 CSS。

谢谢你。

例如，这将在谷歌浏览器中打开

<div id="head"><h1>Logo</h1></div>

但如果它要在 Internet Explorer 中打开，则它不会打开<div id="head"><h1>Logo</h1></div>，但它会打开它。

<div id="headIE"><h1>Logo</h1></div>

Answer 1

您可以像这样使用条件注释：

<!--[if IE]>
  <div id="headIE"><h1>Logo</h1></div>
<![endif]-->
<!--[if !IE]><!-->
  <div id="head"><h1>Logo</h1></div>
<!--<![endif]-->

但如果你尝试编写适用于所有浏览器的 CSS 会更好。

Answer 2

以这种方式更改 HTML 元素 ID 是一种跨浏览器兼容性的非常老套的方法。相反，您应该尝试编写适用于您希望支持的不同浏览器的 CSS。如果您有一个标题图像问题的示例，那么 CSS 修复会更清晰。

Answer 3

我用这段代码解决了它：

<div id="head">
    <!--[if IE]>
        <img src="hateIE.png" align="middle">
    <![endif]-->
    <!--[if !IE]><!-->
        <h1>Mira's</h1><br>
        <h2>Koding place</h2>
    <!--<![endif]-->
</div>

Answer 4

对 IE 使用条件注释

<!--[if IE]>
Special IE logo
<![endif]-->
<!--[if !IE]> -->
Normal logo
<!-- <![endif]-->

Answer 5

我建议尝试找到适用于 IE 和其他浏览器的解决方案，如何为您的徽标添加图像标签而不是 css + text-indent 替换？但是，如果您真的想要，您可以通过 jQuery 定位 IE 并更改 ID。前任：

if($.browser.msie) {
  $('#head').attr('id','headIE');
}