与在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> 

Li元素没有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; 
}