IE7 не отображает изображение в стиле списка в неупорядоченных списках? - PullRequest
Новая
       26

IE7 не отображает изображение в стиле списка в неупорядоченных списках?

0 голосов
/ 15 декабря 2011

Я создал сайт, который использует неупорядоченные списки.Эти списки используют изображение (помечает некоторые ul, пересекает другие), которые используют атрибут list-style-image в CSS.Он отлично работает во всех браузерах, кроме IE7.

Когда страница просматривается в IE7, списки отображаются в порядке, но изображение не отображается, что странно, как и все остальные.браузеры (IE8, IE9, Chrome, Firefox, даже Safari) выбирают его и отображают.

Вот код CSS: 

#carousel ul.benefits {
float: right;
width: 573px;
margin-right: 18px;
margin: 0px;
margin-top: 10px;
padding: 0px;
padding-left: 30px;
}

#carousel ul.benefits li {
font-family: "OpenSansRegular",Tahoma,sans-serif;
font-size: 1.8em;
font-weight: normal;
color: #bdbdbd;
list-style-image:url('images/white-tick.png');
float: left;
width: 100%;
}

HTML: 

<ul class="benefits">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Это странная проблема, с которой мне никогда не приходилось сталкиваться.

Ответы [ 2 ]

4 голосов
/ 15 декабря 2011

Существует известная ошибка в IE7 по этому поводу. Плавающий элемент списка не будет отображать изображение маркера списка.

Возможно, вы могли бы добиться того же, используя фоновое изображение и некоторые отступы.

Обновление

Вот ссылка на сайт: http://reference.sitepoint.com/css/list-style-image#compatibilitysection

1 голос
/ 15 декабря 2011

Как сказал Лео, вам придется использовать фоновое изображение: 

#carousel ul.benefits li {
background: url("images/white-tick.png") no-repeat 2px 5px transparent; /*adjust 2px & 5px until it looks correct */
display: block;
padding: 2px 4px 2px 20px; /*adjust until you have enough left padding to account for your bullet */
}
...