Question

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

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

以下是我的代码：

＆＃13;

* {
  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;     
}

＆＃13;

<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>

＆＃13;

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

如何让它自动增大宽度？

谢谢。

Answer 1

删除规则“＃context-menu ul＆gt; li.submenu :: after”中的“float：right”似乎在Internet Explorer 11中对我有效。

固定元素的自动宽度不适用于IE11

1 个答案: