无法将 div 的内容在 Edge 中左对齐

Question

我们有一个侧边菜单，其中每个列表项都包含一个图像和一个应左对齐的文本。它在 Google Chrome 中看起来不错，但 IE 和 Edge 呈现不同。我不介意 IE 无法正常工作（我可能会尝试稍后再回到那个问题），但 Edge 需要按预期工作。

我曾尝试在 <a> 标签上使用 justify-content: flex-start，然后将其更改为 display: flex，这通常有效，但在这种情况下无效。

a {
  text-decoration: none;
}

ol,
ul {
  list-style: none;
}

#sidebar {
  width: 230px;
}

#sidebar ul {
  margin: 10px 0;
  padding: 0;
}

#sidebar li {
  margin: 0;
  padding: 0;
}

#sidebar ul a {
  display: inline-flex;
  align-items: center;
  text-align: left;
  white-space: pre-wrap;
  border: 1px solid grey;
  padding: 15px 20px;
  width: 155px;
  min-width: 155px;
}

#sidebar ul a img {
  margin: 0 15px 0 4px;
  padding: 0;
  height: 21px;
  width: 20px;
}

<div id="sidebar">
  <ul>
    <li>
      <a href="#">
        <img src="https://i.imgur.com/UU5GJm7.png" >
        <span>Super Long Account Name</span>
      </a>
    </li>
  </ul>
</div>

以下是代码在 Chrome 与 Edge 中的呈现方式：

如有任何帮助，我们将不胜感激

Answer 1

我认为 white-space: pre-wrap; 导致了您的问题

尝试删除它的所有实例（从如下选择器中）：

#sidebar ul a {
  white-space: pre-wrap;
}

a {
  text-decoration: none;
}

ol,
ul {
  list-style: none;
}

#sidebar {
  width: 230px;
}

#sidebar ul {
  margin: 10px 0;
  padding: 0;
}

#sidebar li {
  margin: 0;
  padding: 0;
}

#sidebar ul a {
  display: inline-flex;
  align-items: center;
  text-align: left;
  border: 1px solid grey;
  padding: 15px 20px;
  width: 155px;
  min-width: 155px;
}

#sidebar ul a img {
  margin: 0 15px 0 4px;
  padding: 0;
  height: 21px;
  width: 20px;
}

<div id="sidebar">
  <ul>
    <li>
      <a href="#">
        <img src="https://i.imgur.com/UU5GJm7.png" >
        <span>Super Long Account Name</span>
      </a>
    </li>
  </ul>
</div>

Answer 2

只需从 #sidebar ul a 样式中删除 white-space: pre-wrap;。它会解决您的问题。

请参阅下面的代码段

a {
  text-decoration: none;
}

ol,
ul {
  list-style: none;
}

#sidebar {
  width: 230px;
}

#sidebar ul {
  margin: 10px 0;
  padding: 0;
}

#sidebar li {
  margin: 0;
  padding: 0;
}

#sidebar ul a {
  display: inline-flex;
  align-items: center;
  text-align: left;
  /*white-space: pre-wrap;*/
  border: 1px solid grey;
  padding: 15px 20px;
  width: 155px;
  min-width: 155px;
}

#sidebar ul a img {
  margin: 0 15px 0 4px;
  padding: 0;
  height: 21px;
  width: 20px;
}

<div id="sidebar">
  <ul>
    <li>
      <a href="#">
        <img src="https://i.imgur.com/UU5GJm7.png" >
        <span>Super Long Account Name</span>
      </a>
    </li>
  </ul>
</div>

无法将 div 的内容在 Edge 中左对齐

Cannot align contents of div to the left in Edge

html

css

flexbox

microsoft-edge