Internet Explorer 10-11中列表项目符号的奇怪行为

Question

检查出来，子弹在图片上：

图片css：

    img[src="img/tecnicos.jpg"] {
    max-width: 300px;
    max-height: 300px;
    float: left;
    margin-right: 2em;
}

子弹列表css：

    #contenido ul {
    max-width: 75ch;
    margin: auto;
    font-family: 'Work Sans';
    text-align: left;
    line-height: 1.5em;
    font-size: 0.9em;
    list-style: disc;
}

HTML：

 <h2>BLa</h2>
        <img src="img/image.jpg" alt=''>
        <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>...</li>
        </ul>

李元素没有css。

在Chrome和Firefox上，项目符号显示在文本旁边的位置。

提示？

Answer 1

如果您不需要列表在图片中流动，则将overflow: hidden添加到列表中会修复它：https://jsfiddle.net/jameson5555/95koe4sg/2/

ul {
    overflow: hidden;
}

如果需要换行，可以添加如下内容：https://jsfiddle.net/jameson5555/95koe4sg/3/

ul {
    overflow: hidden;
    display: inline;
    list-style-position: inside;
}

Answer 2

使用

创建新的块格式化上下文

ul {
    overflow: hidden;
}