我一直在寻找一种方法来删除通常在链接元素的换行期间创建的空白，并提出了 flex-basis: 0 解决方案，该解决方案适用于主要版本IE11 以外的浏览器。
这是我上面提到的空白的例子:
如果有人能提出同样支持 IE11 的类似可能性，我将不胜感激
.menu {
display: flex;
}
.menuItem {
list-style: none;
padding-right: 30px;
}
.menuItem a {
position: relative;
padding-right: 20px;
display: block;
background-color: #ccc;
}
.menuItem a:after {
content: '\25be';
position: absolute;
right: 0;
top: 0;
}
@media (max-width: 1100px) {
.noWhiteSpace .menuItem {
flex-basis: 0;
}
}<ul class='menu'>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some MoreText</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
</ul>
<h2>No White Space</h2>
<ul class='menu noWhiteSpace'>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some MoreText</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
</ul>更新 flex-basis: auto:
下面的方法确实恢复了列表项的宽度，但又带回了元素在分成两行时创建空白的问题。 
最佳答案
我建议您为 Internet Explorer 使用 flex-basis: auto;。
Reason is, when a non-auto flex-basis is specified, Internet Explorer 10 and 11 always uses a content-box box model to calculate the size of a flex item.
引用:
Browser compatibility for flex-basis
修改后的代码:
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
display: flex;
}
.menuItem {
list-style: none;
padding-right: 30px;
}
.menuItem a {
position: relative;
padding-right: 20px;
display: block;
background-color: #ccc;
}
.menuItem a:after {
content: '\25be';
position: absolute;
right: 0;
top: 0;
}
@media (max-width: 1100px) {
.noWhiteSpace .menuItem {
flex-basis: auto;
}
}
</style>
</head>
<body>
<ul class='menu'>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some MoreText</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
</ul>
<h2>No White Space</h2>
<ul class='menu noWhiteSpace'>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some MoreText</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
<li class='menuItem'>
<a target='_' href='https://www.google.com'>Some Text</a>
</li>
</ul>
</body>
</html>IE 11 中的输出:
关于css - 减少列表项宽度以占据 Internet Explorer 11 中文本内容的确切大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58202768/