Я позиционировал ссылки на одном изображении, которое имеет 3 кнопки (что-то вроде this).Почему IE не поддерживает мое позиционирование CSS

Позиционирование работает с Firefox и Chrom, но с моим «любимым» IE (11) .. ну .. Я вижу ссылку на изображении как невидимый очень маленький символ. Если бы я был пользователем, я бы этого не заметил и думал, что ссылка не работает.

Я не могу опубликовать свой настоящий код, но я изменю имена в нем.

HTML (есть "LPS" класс ДИВ перед этим кодом):

<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

@ Justinas. Это вариант, но я предпочитаю не менять код слишком сильно. –

Вам лучше сделать более сложный код вместо «Лучшей практики»? Вы строите дом, который предназначен для краха и продолжения, потому что вы уже начали ... – Justinas

Ответ принять

Вместо размещения непобедимых элементов над спрайтов изображения, использовать background-image как то спрайт и просто измените background-position для каждого элемента. Таким образом, вы можете поместить любое расстояние между элементами, независимо от пробелов между изображениями спрайтов.

источник

2014-08-28 08:18:40 Justinas

Спасибо, Юстина! :) –

использовать различные таблицы стилей для поддержки 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, не разрушая другие браузеры макет в голову тег

Смежные вопросы