固定元素上的自动宽度在 IE11 上不起作用

Question

我在 IE11 上的固定元素上遇到问题。这是一个上下文菜单，需要根据里面的文本水平增长。这适用于 Firefox、Chrome 和 Safari，但不适用于 IE。

问题在于，在 IE11 上，右箭头向下移动到下一行，而不是增加行以允许显示所有文本。

以下是我的代码：

* {
  box-sizing: border-box; 
}

#context-menu {
  display: none;
  text-align: left;
  position: fixed;
  z-index: 1000000000;
}
#context-menu ul {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 1px 1px 3px #444;
  text-align: left;
  min-width: 150px;
  width: auto;
}
#context-menu ul,
#context-menu ul li {
  padding: 0;
  margin: 0;
  position: relative;
  display: block;
  width: auto;
  color: black;
  text-align: left;
  background-color: #fff;
}
#context-menu ul li {
  padding: 5px 10px;
  cursor: pointer;
}
#context-menu ul li:hover ul {
  z-index: 1;
}
#context-menu ul li:first-child {
  border-radius: 3px 3px 0 0;
}
#context-menu ul li:last-child {
  border-radius: 0 0 3px 3px;
}

#context-menu ul li .fa {
  margin-right: 10px;
  width: 15px;
  vertical-align: middle;
}
#context-menu ul li.group {
  cursor: default;
  background-color: #dfdfdf;
  font-weight: bold;
}
#context-menu ul > li:not(.group):hover {
  background-color: hsla(208, 56%, 53%, 1);
  color: black;
} 
#context-menu ul > li.submenu::after {
  font-family: FontAwesome;
  content: "\f105";
  margin-left: 15px;
  float: right;
}

#context-menu ul> li > ul{
  display: none;
}
#context-menu ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;     
}

<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>
<div id="context-menu" style="display: block;">
  <ul>

    <li><span class="optionText">Long text to show the problem here on the right arrow</span></li>


    <li class="submenu"><span class="optionText">Another text</span></li>


    <li class="submenu"><span class="optionText">Long text to show the problem here on the right arrow</span>
      <ul class="dropdownright">

         <li><span class="optionText">Other</span></li>

      </ul>
    </li>

  </ul>
</div>

如果你看到，如果文本长于最小宽度，它会在除 IE11 之外的所有浏览器上增长，其中箭头向下移动到下一行。

如何让它自动增加宽度？

谢谢。

Answer 1

删除规则“#context-menu ul > li.submenu::after”中的“float:right”似乎在 Internet Explorer 11 中对我有用。