0
我在固定元素上遇到IE11上的问题。这是一个需要水平增长的上下文菜单,具体取决于里面的文本。这适用于Firefox,Chrome和Safari,但不适用于IE。固定元素上的Autowidth在IE11上不起作用
问题是,在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,其中箭头去所有的浏览器下到下一行。
如何让它自动增加宽度?
谢谢。
我需要在右侧的箭头总是,所以这不是解决方案:( –
你试过解决方案吗?它会留在右侧。 –
是的,我试着发布这个问题之前(和更多)。尝试与新的HTML,如果所有的箭头是在右侧。 –