IE11内联菜单样式不工作

Question

我有打开内联块链接的菜单，这个菜单在除IE11之外的所有浏览器中都能正常工作。

在铬中，如下所示

​

​

在IE11中显示此链接

​

​

这个片段

​

.rlist--inline {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rlist--inline li{
  display:inline-block;
  padding:10px;
  border:1px solid black;
}


.dropdown__menu li{
  padding:5px;

}
.dropdown__menu a {
    white-space: nowrap;
    padding: 12px 20px 8px;
}
* {
    box-sizing: border-box;
}
.dropdown:hover>.dropdown__menu {
  display: flex;
    background: #ed1c24;
    left:-100%;
    
}


.dropdown {
   display:inline-block;
    position: relative;
    background:red;
}
.dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    font-size: 14px;
    text-align: left;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

<ul class="rlist--inline">


<li class="menu-item"><a><span>Topics</span></a></li>
<li class="dropdown menu-parent" >
	<a title="Journal" class="dropdown__toggle">
		<span>Journal</span>
	</a>
	<ul class="rlist dropdown__menu">
		<li>
			<a title="Current Issue"">
				<span>Current Issue</span>
			</a>
		</li>
		<li>
			<a>
				<span>Archive</span>
			</a>
		</li>
		<li>
			<a >
				<span>Article Series</span>
			</a>
		</li>
	</ul>
</li>

</ul>

​

我如何在IE11中修复它？我试图澄清和纠正：-100%，但仍然存在问题。任何帮助............................................................

Answer 1

首先，您的HTML中有双引号的问题

<a title="Current Issue"">

第二，当您在IE中的一行中显示flex时，它不计算新的宽度，而是保持与flex框为列时相同的宽度。我不太清楚你想要完成什么，但是如果你想让子菜单变成红色，你可以直接将红色和阴影应用到你的列表中，比如：

​

.rlist--inline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rlist--inline li {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
}

.dropdown__menu li {
  padding: 5px;
}

.dropdown__menu a {
  white-space: nowrap;
  padding: 12px 20px 8px;
}

* {
  box-sizing: border-box;
}

.dropdown:hover>.dropdown__menu {
  display: flex;
  /* background: #ed1c24; */
  left: -100%;
}

.dropdown {
  display: inline-block;
  position: relative;
  background: red;
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  font-size: 14px;
  text-align: left;
}


 ul.rlist > li {
  background: #ed1c24;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

<ul class="rlist--inline">
  <li class="menu-item"><a><span>Topics</span></a></li>
  <li class="dropdown menu-parent">
    <a title="Journal" class="dropdown__toggle">
      <span>Journal</span>
    </a>
    <ul class="rlist dropdown__menu">
      <li>
        <a title="Current Issue">
          <span>Current Issue</span>
        </a>
      </li>
      <li>
        <a>
          <span>Archive</span>
        </a>
      </li>
      <li>
        <a>
          <span>Article Series</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

​