链接仅适用于桌面设备，不适用于移动设备

Question

我们的主页上有一个 slider，它在桌面视图上工作得很好，但在智能手机或平板电脑视图上没有任何反应。

如果我打开开发者控制台并切换到智能手机视图，那么点击时什么也不会发生。 （您可能需要重新加载页面几次，直到错误变得明显为止）

这是我说的 slider：

网址： https://www.blizz-z.de/

<div id="homeslider-revolution" style="overflow: visible;">
    <div class="revolution-slider revslider-initialised tp-simpleresponsive" id="revslider-227" style="height: 222px;">
        <ul style="display: block; overflow: hidden; width: 100%; height: 100%; max-height: none;">
            <li data-transition="fade" data-slotamount="1" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;"><a href="/aktionen"><img src="/media/wysiwyg/slider/blizz-z-hp-slider-bauplattenmailing-19.jpg" alt="Jet Bauplatten mit satten Rabatten"></a></li>
            <li data-transition="fade" data-slotamount="1" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;"><a href="/produkte-bewerten"><img src="/media/wysiwyg/slider/blizz-z-hp-slider-bewertung-19.jpg" alt="Produkt bewerten &amp; Überraschung erhalten"></a></li>
            <li data-transition="fade" data-slotamount="1" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;"><a href="/newsletter-bestellen"><img src="/media/wysiwyg/slider/slider-newsletter/newsletter-bestellen-de.jpg" alt="Newsletter abonnieren"></a></li>
            <li data-transition="fade" data-slotamount="1" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 20; opacity: 1;"><a href="/anwendungstechnik/abdichtungsnormen.html"><img src="/media/wysiwyg/slider/slider-abdichten/abdichtungsnormen.jpg" alt="Abdichtungsnormen"></a></li>
        </ul>
        <div class="tp-loader" style="display: none;"></div>
        <div class="tp-bannertimer" style="visibility: hidden; width: 83.8696%; overflow: hidden;"></div>
    </div>
    <div class="tp-bannershadow tp-shadow1" style="width: 820px;"></div>
    <div class="tp-bullets simplebullets round hidebullets" style="bottom: 6px; left: 50%; margin-left: -39px;">
        <div class="bullet first"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet last selected"></div>
        <div class="tpclear"></div>
    </div>
    <div style="position: absolute; top: 170px; margin-top: -22px; left: 0px;" class="tp-leftarrow tparrows default hidearrows"></div>
    <div style="position: absolute; top: 170px; margin-top: -22px; right: 0px;" class="tp-rightarrow tparrows default hidearrows"></div>
</div>

最高的slider的z-index为20，其他为18。slider图片上方没有其他元素阻挡点击。

它不适用于 Chrome和 FireFox ，但适用于 Apple iOS 浏览器。 我的想法用完了，开始认为这是一个浏览器错误

更新：

我使用的是 Chrome 版本 75.0.3770.142（Offizieller Build）（64 位）

我做了一个错误报告。

Answer 1

只需添加这个：

.tp-simpleresponsive a{
    border:1px solid;
    display:block;
}

问题是您在移动设备中的内联链接未随图像缩放高度。

Answer 2

哦，是的，我遇到了同样的问题，我的navlinks在桌面上运行良好，但在移动设备上无法打开。

我所做的只是为我的导航链接分配了一个非常大的z-index编号

#mainnav {
   position: absolute;
   font-family: 'Roboto Condensed', sans-serif;
   z-index: 10000;
} 

Answer 3

在浏览器中检查您的代码，您会发现一个带有 class 下拉背景的 div。 这是由浏览器自动创建的。 尝试通过以下方法隐藏它，您的代码将开始工作。

在 CSS 文件中：

.dropdown-backdrop {
    display: none;
}