Question

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

谢谢。

示例，这将在Google Chrome中打开

<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

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

Answer 2

你可以这样使用conditional comments：

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

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

Answer 3

对IE使用条件注释

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

Answer 4

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

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

Answer 5

我用这段代码解决了它：

<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>

在Internet Explorer中替换整个div

5 个答案: