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

【问题标题】：Floating image and text wrap for order list订单列表的浮动图像和文本换行
【发布时间】：2020-11-04 11:43:25
【问题描述】：

有什么方法可以让 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>

【问题讨论】：

这能回答你的问题吗？ Is there really no way to wrap text around an image in flexbox?

标签： html css google-chrome internet-explorer cross-browser

【解决方案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 浏览器中的输出：

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

【讨论】：

谢谢迪帕克。看起来不错！但是 list-style-position 会弄乱第二行开始的文本换行。我想保持列表项在多行时正确显示。有什么办法可以解决吗？
你能提供一个例子来说明多行的问题吗？我将尝试检查它并尝试找到任何可能的解决方案。感谢您的理解。
当然，我想像这样正确显示列表项。 imgur.com/d12k92C
请查看更新后的答案。它可以帮助您解决问题。您可以根据自己的需要进行修改。
那个伟大的 Deepak-MSFT，这就是我想要的。我刚刚在css上修改了一些填充，它工作正常。 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { img { float: left;右边距：15px； } ol { 位置：相对；左填充：0；左边距：0；填充权：1.8em；左：1.8em； } ol li { list-style-position: inside;文本缩进：-1.8em；左填充：2em； }