IE - <a> 标签无法正确呈现，适用于 chrome、firefox 等答案

【问题标题】：IE - <a> tag not rendering properly, works in chrome, firefox etcIE - <a> 标签无法正确呈现，适用于 chrome、firefox 等
【发布时间】：2013-07-11 13:18:15
【问题描述】：

我在 IE 中的页面上呈现标签时遇到问题。问题出在以下几点；标记，在 IE 中不填充标记。图片是链接，但在 IE 中，文本优先并覆盖图像以使文本成为链接。 Chrome 和 FireFox 没有问题并且渲染良好。我的问题是：

如何在 IE 中将图像设为链接并使其像在 Chrome 和 FireFox 中一样工作？

以下图片展示了我的问题： IE中的问题：

它应该如何根据 Chrome 和 FireFox 呈现：

该部分的代码如下：

h1#site-name, div#site-name /* The name of the website */
{
margin: 0;
font-size: 2em;
line-height: 1.3em;
height: 115px;
background: url('/sites/default/files/images/ipark2-theme-assets/iPark_title.jpg') no-repeat top right;
margin-left: 212px;
color: transparent;

}

  #site-name a:link,
  #site-name a:visited
  {
   color: transparent;
    text-decoration: none;
    display: block;
    height: 100%;
  filter: alpha(opacity=50);
  font-size:1em;
  }

编辑：添加 html 标记：

 <div id="logo-title">

 <div id="logo"><a href="/" title="Home" rel="home"><img src="/sites/all/themes/zen/ipark2/logo.png" alt="Home" id="logo-image" /></a></div>

 <div id="site-name"><strong>
 <a href="/" title="Home" rel="home">Teaching and Learning Innovation Park</a>
 </strong></div>

 </div> <!-- /#logo-title -->


 </div></div> <!-- /#header-inner, /#header -->

【问题讨论】：

你的 html 标记在哪里？
添加 HTML 标记 @chrisvillanueva
看起来您在 CSS 中使用了两次 ID（在 H1 和 div 上）？另外，为什么你也不使用类，你已经选择给所有东西一个 ID。这有什么特别的原因吗？
好吧，有了这一切，你可以做一个jsFiddle！
jsFiddle - jsfiddle.net/vyfr2

标签： css internet-explorer stylesheet

【解决方案1】：

您将 ID 应用于两个元素（您的 H1 和您的 div），使用类，因为您现在只是为所有内容添加 ID。

我不确定这是否能解决您的问题，但不会有什么坏处，而且我知道旧版本的 IE 在识别 ID 时会更加严格（如果 ID 不是唯一的）。由于您通过该 ID 定位您的锚标记，这让我怀疑这是否不是问题。

【讨论】：