html - 点位于 IE11 中 旁边图片的错误一侧

Question

我有一个带有图片的 div，旁边是一个带有一些文本的 div，其中包括一些列表 (li)，li 的点应该在图片的右侧，但在 IE11 中它显示在带有图片的 div，在左侧。

我做了一个 jsfiddle 来更好地解释它:http://jsfiddle.net/tD8an/6/

HTML:

<div id="container">
    <div id="pic">
        <img src="http://www.wallcore.net/wp-content/uploads/2013/09/funny_pic_of_a_monkey-280x280.jpg"/>
    </div>
    <div id="text">
        <b>HEADLINE</b>
        <ul>
            <li>Li 1</li>
            <li>Li 2</li>
        </ul>
    </div>
</div>

CSS:

#container {
    width: 700px;
    float: left;
}
#pic {
    width: 300px;
    float: left;
    text-align: center;
    margin: 0 15px;
}
#text {
    width: 700px;
}

是否有任何修复或我可以做些什么？我做错了什么吗？

Answer 1

您可以做的第一件事是将元素符号的位置更改为内部。我看不出这里有任何缺点。

ul {
    list-style-position: inside;
}

或者，您可以创建一个带有溢出的新 block 格式化上下文。但是文本不会围绕图像流动。

#text {
    overflow: hidden;
}