IE Исчезающая ошибка пули в плавающем DIV - PullRequest
Новая
       11

IE Исчезающая ошибка пули в плавающем DIV

1 голос
/ 02 июня 2009

Существует множество предложений на форумах по этому поводу, но ни один из них не показал мне каких-либо признаков успеха.

У меня есть плавающий div, который содержит UL, стилизованные для использования изображения маркера. Все совместимые браузеры показывают изображение в порядке. Когда я обновляю страницу в IE 6, маркеры часто появляются, но снова исчезают при прокрутке страницы. В IE 7 они просто не отображаются.

Страница находится здесь:

http://hiv411.org/page.php?pID=13&n=Other_STDs

Соответствующий CSS: 

#hiv101STDSidebar UL {
width:215px;
}

#hiv101STDSidebar LI {
position:relative;  /* added per some forum post, no effect*/
list-style-image:url(/images/layout/squareBulletBlue.gif);
}

Любые предложения высоко ценится. Было бы стыдно переписывать эти UL в виде таблиц!

Ответы [ 3 ]

3 голосов
/ 02 июня 2009

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

HTML 

<div id="floated">
        <ul>
            <li>
                Item
            </li>
            <li>
                Item 2
            </li>
        </ul>
    </div>

CSS 

div#floated {
    float: left;
}

ul {
    padding: 0;
}

li {
    background: transparent url(squareBulletBlue.gif) no-repeat 0 2px;
    list-style-type: none;
    padding-left: 1.2em;
}

Работает в IE6 и 7 для меня, если нет, у вас есть другие проблемы с вашим кодом:)

2 голосов
/ 02 июня 2009

Это исправлено в ie6 & 7: 

#hiv101STDSidebar ul {
  width: 215px;
  margin: 0 0 0 0; /* resetting margin */
  padding: 0 0 0 40px; /* using padding to position ul */
}

У него не было времени, чтобы должным образом провести расследование, но это, кажется, унаследованный левый край боковой панели, который вызывает проблему. Использование padding в ul исправляет странное поведение в ie6 и ie7, но не подходит для стандартных совместимых браузеров, поэтому вам нужно добавить этот стиль с вашей условной lte ie7 css.

Надеюсь, это поможет.

2 голосов
/ 02 июня 2009

Попробуйте применить стиль маркера к атрибуту background. 

selector li {
    background: transparent url(/images/layout/squareBulletBlue.gif) left center no-repeat;
    paddding-left: 25px; 
}

Возможно, вам придется сбросить padding и margin на вашем ul селекторе.

...