使用 flex 修复菜单上 IE 的 CSS答案

【问题标题】：CSS fix for IE on menù with flex使用 flex 修复菜单上 IE 的 CSS
【发布时间】：2019-06-18 20:07:54
【问题描述】：

谁能帮我修复 IE11 上的这个菜单，在 chrome 上运行没有问题？

$(".menu > ul > li").hover(function (e) {
        $(this).children("ul").stop(true, false).fadeToggle(150);
        if ($(this).children("ul").css('display') == "block") { $(this).children("ul").css('display', 'flex'); }
        e.preventDefault();
});

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身最好是在堆栈片段中重现它所需的最短代码。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： css internet-explorer-11

【解决方案1】：

我不能放一个固定的尺寸。它必须适应元素的数量。

我通过脚本将其设置为悬停来解决它

$(".menu > ul > li").hover(function (e) {
        $(this).children("ul").stop(true, false).fadeToggle(150);
        if ($(this).children("ul").css('display') == "block") { 
            $(this).children("ul").css('display', 'flex'); 
          $(this).children("ul").width(160*$(this).children("ul").children().length);
        }
        e.preventDefault();
});

【讨论】：

【解决方案2】：

尝试为内部 ul 容器添加 width 属性。

更改以下代码：

            .menu > ul > li > ul {
                position: absolute;
                z-index: 99;
                display: none;
                top: 106%;
                z-index: 1000;
                padding: 5px 0;
                font-size: 14px;
                text-align: left;
                list-style: none;
                background-color: #fff;
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
                box-shadow: 0 6px 12px rgba(0,0,0,.175);
                right: -10px;
            }

到（添加宽度属性）：

            .menu > ul > li > ul {
                position: absolute;
                z-index: 99;
                display: none;
                top: 106%;
                z-index: 1000;
                padding: 5px 0;
                font-size: 14px;
                text-align: left;
                list-style: none;
                background-color: #fff;
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
                box-shadow: 0 6px 12px rgba(0,0,0,.175);
                right: -10px;
                width:500px;
            }

在IE浏览器中的结果如下：

【讨论】：

非常感谢您的回答，问题是我无法放置固定尺寸。它必须适应元素的数量。我通过脚本将其设置为悬停来解决它
没关系，好消息是你解决了问题，干杯^-^。