Internet Explorer 10 中的导航和滑块会发生什么情况？答案

【问题标题】：What happens with my navigation and Slider in Internet Explorer 10?Internet Explorer 10 中的导航和滑块会发生什么情况？
【发布时间】：2026-01-12 09:20:05
【问题描述】：

我正在开发自己的网站：www.heike-waltz.de

过去我习惯于在 IE 中使用条件 cmets。但由于 IE10 无法再做到这一点，我不知道如何解决我的问题。

我的导航在除 IE 之外的所有浏览器上都能正常工作。如果悬停，则底线不在正确的位置。它位于黑色“边框底线”上方约 1px 处。

我的滑块也不能在 IE 中工作。这是我添加的javascript.....

我真的不知道该怎么办:)

有什么想法吗？

将不胜感激。

干杯，海克

【问题讨论】：

a) 请在您的问题中发布minimal reproducible example，b) 为什么您关心 IE10？它已经 7 岁了，将于 2020 年 1 月达到使用寿命

标签： css internet-explorer

【解决方案1】：

我在 IE 中检查了您的网站，在控制台中存在语法错误，它指向 arrow function 行。箭头函数在 IE 中为not supported。所以你应该把它翻译成 ES5 语法然后它可以在 IE 中运行：

pause = function pause() {
    clearInterval(myTimer);
};

resume = function resume() {
     clearInterval(myTimer);
     myTimer = setInterval(function () {
         plusSlides(slideIndex);
     }, 5000);
};

此外，您可以使用媒体查询来加载 IE 特定的 CSS。您可以尝试在样式表中添加以下代码来调整 IE 中的底线位置：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*media query to detect IE*/ 
    #desktop-nav > ul > li > a {
        color: black;
        position: relative;
        width: auto;
        text-decoration: none;
        transition: color 0.5s linear;
        padding: 10px 0 11px 0;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .active-link a {
        color: #40c2c2 !important;
        text-decoration: none;
        border-bottom: 1px solid #40c2c2;
        padding: 10px 0 10px 0 !important;
    }
}

【讨论】：