Question

在论坛上有一个关于此问题的建议世界，但没有任何迹象显示我的成功。

我有一个浮动的div，其中包含使用子弹图像设计的UL。所有兼容的浏览器都显示图像正常。当我在IE 6中刷新页面时，子弹经常出现，但在页面滚动时会再次消失。在IE 7中，它们无法显示出来。

Page在这里：

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重新编写为表格将是一种耻辱！

Answer 1

正如其他人所建议的那样，使用背景图像而不是子弹图像。

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中工作，如果没有，那么你的代码就会遇到其他问题：）

Answer 2

尝试使用background属性设置项目符号样式。

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

您可能需要重置padding选择器上的margin和ul。

Answer 3

将其修复为ie6＆amp; 7：

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

没有时间进行适当的调查，但似乎是侧边栏的继承左边缘导致问题。在ul上使用填充修复了ie6和ie7中的奇怪行为，但它对标准兼容的浏览器不太好用，所以你需要用条件lte ie7 css添加这个样式。

希望这有帮助。

IE浮动DIV中消失的Bullet Bug

3 个答案: