订单列表的浮动图像和文本换行

Question

有什么方法可以使带有浮动图像和文本换行的项目符号在 IE11 中看起来正常吗？

下面是 chrome 的屏幕（理想）：

IE11下的画面如下：

<style>
img {
    float: left;
    margin-right: 10px;
}
ol {
    position: relative;
    padding-left: 0;
    left: 15px;
}
</style>

<img src="https://via.placeholder.com/100">
<div>Below are bullets</div>
<ol>
    <li>This is the bullet</li>
    <li>This is the bullet</li>
    <li>This is the bullet</li>
    <li>This is the bullet</li>
    <li>This is the bullet</li>
</ol>

Answer 1

我尝试修改代码并尝试实现与其他浏览器接近的结果。

我应用了媒体查询，并尝试专门为 IE 浏览器设置列表样式位置、文本缩进和填充。

现在它看起来与在其他浏览器中看起来几乎相似。

修改后的代码：

<!DOCTYPE html>
<html>
   <head>
      <title>Untitled Page</title>
      <style>
         @supports not (-ms-high-contrast: none) 
         {
         img 
         {
         float: left;
         margin-right: 10px;
         }
         ol 
         {
         position: relative;
         padding-left: 5px;
         left: 10px;
         }
         #container
         {
         width:300px;
         background-color:skyblue;
         padding:5px;
         }
         }
         @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
         {
         img 
         {
         float: left;
         margin-right: 35px;
         }
         ol 
         {
         position: relative;
         padding-left: 5px;
         margin-left: 10px;
         }
         ol li 
         {
         list-style-position: inside;
         text-indent: -1.8em;
         padding-left: 1em;
         }
         #container
         {
         width:300px;
         background-color:skyblue;
         padding:5px;
         }
         }
      </style>
   </head>
   <body>
      <div id="container">
         <img src="https://via.placeholder.com/100">
         <div>Below are bullets</div>
         <ol>
            <li>This is the bullet This is the bullet This is the bullet</li>
            <li>This is the bullet</li>
            <li>This is the bullet</li>
            <li>This is the bullet This is the bullet This is the bullet</li>
            <li>This is the bullet</li>
            <li>This is the bullet</li>
         </ol>
      </div>
   </body>
</html>

在 IE 11 和 Google Chrome 浏览器中的输出：

另外，您可以根据自己的需要尝试修改代码。

订单列表的浮动图像和文本换行

Floating image and text wrap for order list

html

css

google-chrome

internet-explorer

cross-browser