0

这一切都可以在 Firefox 和 IE 中完美运行，但是它不会在 Chrome 中运行，除非我右键单击并转到检查元素，并且一旦我关闭检查元素，它就会回到不使用箭头光标悬停时，就好像它是甚至没有链接。

我尝试将其容器设置为最高 z-index，我尝试过 pointer-events: 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
    });
});

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

硅

4

2 回答 2

0

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

您可以添加以下 css：

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

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

于 2013-05-27T07:52:37.297 回答
0

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

我检查了代码，没有发现任何差异，这让我更加困惑，最终我想我自己一定有一些东西与我没有专门设置的图像重叠，因为我将链接放在页面的更下方而它们不是在 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 修复了它。

我不得不说我之前创建的任何网站都没有遇到过这个问题。

于 2013-05-28T01:10:35.607 回答