html - 在 Internet Explorer 中左浮动 和

Question

我在 Internet Explorer 中遇到无序列表问题(据我所知是 9,10 和 11)。我有一个 float 到左边的图像，右边有一个无序列表。在 chrome、safari、firefox 中，元素符号显示在图像的右侧，即列表项所在的位置。在 IE 中，元素符号显示在图像的左侧。顺便说一句，如果重要的话，这是一个用 joomla 制作的网站。

有人知道我的代码有什么问题吗？谢谢

How it should be: chrome, firefox, safari

result in Internet Explorer

html:

<div id="productinfo" class="tab-pane rl_tabs-pane nn_tabs-pane active" aria-hidden="false" aria-labelledby="tab-productinfo" role="tabpanel">

<h2 class="rl_tabs-title nn_tabs-title">

<div>
<img alt="garageline" src="/images/gamma-artikel/garageline.jpg">
</div>
<h4>Product information Wooden Garage</h4>

<ul>
<li>Panel structure thickness plank 18, 22, 28 mm</li>
<li>Door width single ca. 0.80 m</li>
<li>Door height ca. 1.92 m</li>
<li>Wall height ca. 2.10 m</li>
<li>Roofing shingles (of your choice: black, brown, red, green)</li>
<li>Roofing (flat roof) (wooden subroof, metal plate , PVC-gutter)</li>
<li>Goods on pallets, packed in PVC foil</li>
</ul>

CSS:

 img {
  display: inline !important;
  float: left;
  margin-bottom: 70px;
  margin-right: 30px;
  padding-right: 0;
  width: 50%;
}

ul {
  display: block;
  margin-bottom: 30px;
  padding-inline-start: 20px !important;
  padding-left: 0;
}

li {
  display: list-item;
  text-align: match-parent;
}

Answer 1

好吧，你的 img float 正确，你的 ul 显示: block .. IE 从来不喜欢那种类型的东西， float 逃离缓冲区和 IE+ 缓冲区逻辑 = 悲伤和悲伤。只需确保为两个元素指定一个宽度并且都处于 float 状态，然后放置一个 clear:both div under，您应该会得到结果。