Question

这一切都在Firefox和IE中完美运行，但它不能在Chrome中运行，除非我右键单击并转到inspect元素并且当我关闭检查元素时它会回到不使用箭头光标时盘旋好像它甚至不是一个链接。

我尝试将其容器设置为最高的z-index，我尝试过指针事件：all;没有;在父母身上，没有等等......无济于事。

这非常令人困惑，因为我通常没有单独使用chrome的这类问题。

<div class="top_box3">
  <div class="rslides" id="slider2">

    <!-- Problem image link in chrome -->
    <a href="mailto:test@test.com"><img src="images/info_slidebox3.jpg" width="420" height="240" alt=""/></a>

    <img src="images/info_slidebox1.jpg" width="415" height="240" alt=""/>
    <img src="images/info_slidebox2.jpg" width="415" height="240" alt=""/>

  </div>
</div>

相关CSS代码：

.top_box3 {

    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    background-color: white;
    border: 5px solid rgba(0,0,0,0.0);

    box-shadow: 0px 0px 5px 1px #666666;
    -webkit-box-shadow: 0px 0px 8px 1px #888888;
    -moz-box-shadow: 0px 0px 5px 1px #666666;

    width: 420px;
    height: 240px;

    position: absolute;
    right: 8px;
    top: 67px;
    overflow: hidden;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides img {
  display: block;
  float: left;
  width: 100%;
  border: 0;
  }

jQuery代码：

$(function () {
    $("#slider2").responsiveSlides({
        maxwidth: 420,
        maxheight: 240,
        speed: 800,
        timeout: 4000
    });
});

希望有人可以分享一些见解，

的Si

Answer 1

问题是元素内的图像是浮动的。因此，如果您使用开发人员工具检查元素并检查它，可能会告诉您该元素的高度为0px，宽度为0px。

您可以添加以下css：

.rslides a {
  display: block;
  overflow: hidden;   
}

使用display：block，a将填充父容器的整个宽度。额外：使用溢出：隐藏;溢出：隐藏将给出一个元素高度，因为浮动将推动向下的底部。或者设置

的高度和宽度

Answer 2

好的，所以我解决了这个问题，这很奇怪，因为我以前从未见过这个问题。

我检查了代码，发现没有任何差异，这让我更加困惑，最终我认为我的自己必须重叠我的形象，我没有专门设置，因为我将链接放在页面下方它们在Chrome中也无法点击，因此几乎就像整个页面都被覆盖了一样。

撕掉我的头发后，我决定将下面的代码添加到我的css中，就像一个远景。

body {
    /*existing*/
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    /*what i added*/
    height: 0px;
    width: 0px;
}

这解决了问题，它只发生在谷歌浏览器中，显然身体重叠我的div并按窗口大小缩放，我还没弄清楚代码是如何或在哪里做的但是强迫高度和宽度为0px修复它。

我不得不说，在我创建任何网站之前，我从未遇到过这个问题。

使用ResponsiveSlides插件时，“图片链接”在Chrome中不起作用

2 个答案: