IE11内联菜单风格不起作用

Question

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

chrome中的

就像这样

IE11中的

出现链接此

此代码段

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我如何在IE11中修复它？ 我试图制作clearfix＆amp;正确：-100％，但仍有问题。 任何帮助................................................ ............

Answer 1

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

TextBox

其次，看起来当你在IE中连续显示flex时，它不会计算新的宽度，而是保持与flex box为列时相同的宽度。我不完全确定你想要完成什么，但是如果你想让子菜单变成红色，你可以直接将红色和阴影应用到列表项中，如下所示：

<a title="Current Issue"">

.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);
}