我在一个有3个按钮的图像上定位链接（如this）。为什么IE不支持我的CSS定位

该定位与Firefox和Chrom一起使用，但与我的“最喜爱的”IE（11）..以及..我看到图像上的链接是一个看不见的非常小的字符。如果我是用户，我不会注意到它，并认为链接不起作用。

我不能发布我的真实代码，但我会改变它的名字。

HTML（有此代码之前是 “毒素” 类的div）：

<img src="http://example.ag/nts/images/category/subcat/btns.jpg" style="margin-top: 25px; 
margin-bottom: 35px;"> 

<div class="promotioncontent"> 
    <a class="how modal_link" href="#">&nbsp;</a> 

    <div class="term" style="display: none;"> 
     <div class="termcontent"> 
      <div class="termheader"><h3>WORK</h3><a href="#" class="a_close"></a> 
      </div> 

       <div class="termtext"> 
        <img src="http://example.ag/nts/images/category/subcat/work.jpg"> 
        <a class="openprize opennext" href="#"></a> 
       </div> 
     </div> 
    </div> 
     <a class="prize modal_link" href="#">&nbsp;</a> 
     <div class="term" style="display: none;"> 
      <div class="termcontent"> 
       <div class="termheader"><h3> TABLES</h3><a href="#" class="a_close"></a> 
       </div> 
       <div class="termtext"> 
        <img src="http://example.ag/nts/images/category/subcat/tables.jpg"> 
        <a class="openfaq opennext" href="#"></a> 
       </div> 
      </div> 
     </div> 

     <a class="faqs modal_link" href="#">&nbsp;</a> 
     <div class="term" style="display: none;"> 
      <div class="termcontent"> 
       <div class="termheader"><h3>FAQs</h3><a href="#" class="a_close"></a> 
       </div> 
       <div class="termtext"> 
        <img src="http://example.ag/nts/images/category/subcat/FAQ.jpg"> 
       </div> 
      </div> 
    </div> 

</div>

只有相关CSS：

.lps a.how { 
    right: 50%; 
    margin-right: 189px; 
} 

.lps a.modal_link { 
    position: absolute; 
    bottom: 70px; 
    display: block; 
    width: 233px; 
    height: 76px; 
    text-decoration: none; 
}

是一个什么问题的原因，我怎么能修复它而不会损坏Firefox和Chrome浏览器？

来源

2014-08-27 Rick Sanchez

你为什么不使用精灵？你的链接导致精灵图像，每个元素具有相同的“背景图像”，但具有不同的“背景位置” – Justinas 2014-08-27 08:05:37

@Justinas这是一个选项，但我现在不想更改代码太多。 – 2014-08-27 08:52:13

你最好做更复杂的代码而不是“最佳实践”？你正在修建意图崩溃并仍然继续的房屋，因为你已经开始了...... – Justinas 2014-08-27 09:01:27

应答接受

不是把无敌元件在子画面图像的，使用background-image作为子画面和只需更改每个元素的background-position即可。这样，您可以在元素之间放置任何大小的间距，而不管精灵图像之间有空格。

来源

2014-08-28 08:18:40 Justinas

谢谢Justinas！ :) – 2014-08-28 08:26:11

使用不同的样式表的IE支持而不破坏其他浏览器在头部标签布局

  <!--[if IE]> 
      According to the conditional comment this is IE<br /> 
      <![endif]--> 
      <!--[if IE 6]> 
      According to the conditional comment this is IE 6<br /> 
      <![endif]--> 
      <!--[if IE 7]> 

      <![endif]--> 
      <!--[if IE 8]> 
      According to the conditional comment this is IE 8<br /> 
      <![endif]--> 
      <!--[if IE 9]> 
      According to the conditional comment this is IE 9<br /> 
      <![endif]--> 


      <!--[if gte IE 8]> 
      <link href="ie7.css" rel="stylesheet" type="text/css" /> 


      <![endif]--> 




      <!--[if lt IE 9]> 
      According to the conditional comment this is IE lower than 9<br /> 
      <![endif]--> 
      <!--[if lte IE 7]> 
      According to the conditional comment this is IE lower or equal to 7<br /> 
      <![endif]--> 
      <!--[if gt IE 6]> 
      According to the conditional comment this is IE greater than 6<br /> 
      <![endif]--> 
      <!--[if !IE]> --> 
      According to the conditional comment this is not IE 5-9<br /> 
      <!-- <![endif]--> 
      </p> 
      <!--[if gte IE 8]> 
      <style> 
      body 
      { 
      background:Red; 
      } 
      </style> 
      <![endif]--> 

      <!--[if gte IE 7]> 
      <script> 
       alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer."); 
      </script> 
      <p>Thank you for closing the message box.</p> 
      <![endif]-->

来源

2014-08-27 08:08:43

为什么IE不支持我的CSS定位

回答

使用不同的样式表的IE支持而不破坏其他浏览器在头部标签布局

相关问题