Question

以下标记不是我可以更改的内容，因为它基于用户内容。问题是在IE9中，ul中浮动img旁边的项目符号出现在图像的错误一侧。这只是IE9中的一个问题。 ul包装图像的方式是期望的行为和我想保留的东西，但这使得这个问题真的难以解决。关于如何在不改变标记的情况下以一种看起来很好的跨浏览器的方式解决这个问题的任何想法？

小提琴 http://jsfiddle.net/fdHN6/

编辑：我应该提到这一点，list-style-position: inside导致有多行文本的最后一个项目符号不正确地对齐，这就是为什么单独这不是一个好的解决方案的原因

<html>
    <body>
        <div style="width:500px;">
            <img src="http://placekitten.com/g/200/303" alt="smelly cat" />
            <ul style="margin-left: 10px;">
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine</li>
            </ul>
        </div>
</body>
</html>

body{
    margin-left:35px;
}

img {
    margin:20px;
    float:left;
}

ul li {
    list-style-type: disc;
}

Answer 1

list-style-position: inside;

应解决您的问题。

http://jsfiddle.net/fdHN6/1/

更新：使用伪元素可以实现类似的效果，同时保留文本缩进：

http://jsfiddle.net/fdHN6/3/

Answer 2

我遇到了同样的问题并设法找到了解决办法。

我左边有一张图片，右边有一张UL。我希望列表位置在外面，因此跨越多行的文本在左侧很好地对齐。但是在IE9中，子弹向左移动，在图像上方，而不是浮动到图像的右侧。

所以我使用list-style-postion：inside;对于UL和我也添加了一个负面的文本缩进，-12px对我来说非常合适，你需要改变它，直到它符合你的需要。

Answer 3

刚刚遇到同样的问题。我用了

ul {
 overflow: hidden;
 list-style-position: inside;
 text-indent: 1em;
 margin-left: 0;
}

li {
 padding-left: 1em;
}

overflow hidden创建一个新的格式化上下文并强制该框“清除”浮动。通过这种方式，子弹“尊重”漂浮的图像。

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

似乎工作正常。

Answer 4

将ul显示为表格。

ul{display:table;}

如何在IE9中拥有“外部列表样式位置”和浮动元素？

4 个答案: