Question

我们主页上有一个滑块，可以在桌面视图上正常工作，但在智能手机或平板电脑视图上什么也没发生。

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

这是我正在谈论的滑块：

<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>

最高的滑块的z索引是20，而其他滑块的z索引是18。在滑块图像上方没有其他元素可以阻止点击。

它不能在Chrome ~~和FireFox~~ 中使用，但可以在Apple iOS浏览器中使用。我的想法耗尽了，开始认为这是一个浏览器错误

更新：

我正在使用Chrome版本75.0.3770.142（Offizieller Build）（64位）

我做了一个bug report。

Answer 1

只需添加：

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

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

Answer 2

是的，我也遇到了同样的问题，我的navlinks在台式机上工作正常，但无法在移动设备上打开。

我所做的只是为我的 navlinks

分配了一个很大的 z-index 数字

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

链接仅在台式机上有效，而在移动设备上无效

2 个答案: