Internet Explorer 7 8 и 9 дублируют первый фоновый значок в одном 4-значном PNG-файле

Question

У меня есть

<ul>
<a title="maintenance" href="#"><li id="icon-spade"><a title="garden design" href="#">We'll help you design</li>
</a>
    <li id="icon-lawn"><a title="maintenance" href="#">Complete  maintenance service</a></li>
    <li id="icon-flower"><a title="plant shop" href="#">A great selection of different </a></li>
    <li id="icon-latest"><a title="our gardens" href="#">Visit our portfolio of different projects</a></li>
</ul>

На каждом элементе li у меня есть фоновая иконка - это часть спрайта, содержащая все четыре изображения.CSS следующим образом

#four-steps ul {position: relative;}
ul li {float: left; width: 20%; margin-left: 3.3333333%; /* 30px / 900px */ padding-left: 2.5%; /*24px/960*/ padding-top: 14%; margin-bottom: -5%;  }
ul  #icon-spade {background: url(images/4-steps-icons.png) transparent no-repeat 42px 0; display: block; height: 105px; width: 150px;}
ul #icon-lawn {background: url(images/4-steps-icons.png) transparent no-repeat -168px 0; display: block; height: 105px; width: 150px;}
ul #icon-flower {background: url(images/4-steps-icons.png) transparent no-repeat -421px 0; display: block; height: 105px; width: 150px;}
ul #icon-latest {background: url(images/4-steps-icons.png) transparent no-repeat -646px -11px; display: block; height: 105px; width: 150px;}

Они хорошо отображаются во всех браузерах, но не в IE 7, 8 и 9. В них первый значок («лопата») повторяется дважды.Однажды в правильном положении над текстом и еще раз (неправильно слева от первого).

Может кто-нибудь помочь мне решить эту проблему, пожалуйста?Я не уверен, с чего начать - подумать, что это как-то связано с полями?

Answer 1

Ваш HTML-код недействителен.

<ul>
  <a title="maintenance" href="#"><li id="icon-spade"><a title="garden design" href="#">We'll help you design</li>
  </a>
  ....
</ul>

Я не уверен, что вы пытаетесь сделать с этим кодом, но ваши <a> теги не совпадают (у вас больше открывающих тегов <a>, чем закрывающих), что немедленно делает ваш код недействительным.

Но у вас есть <a> тег вне <li>. Это также недопустимо, потому что <li> должен жить непосредственно внутри <ul> - это фиксированная структура, так же как <td> должен быть внутри <tr>.

Оба этих вида недопустимых проблем HTML могут вызвать проблемы с отображением вашей страницы в различных браузерах.

Самое смешное, что остальная часть вашего кода делает то же самое, но это правильно, поэтому я не знаю, почему ваш первый код так плохо закодирован.

Исправьте ваш HTML, и это должно решить ваши проблемы с рендерингом.

Наконец, я рекомендую вам запустить весь ваш HTML-код через W3C Validator , чтобы помочь вам обнаружить любые другие возможные ошибки.