Question

我有一个带有超链接的图像，当小屏幕的css启动时，该超链接变得无法点击。我无法弄明白为什么！

以下是页面：https://jupacharge.com/pages/become-a-reseller

这是页面本身的HTML，有问题的图片/链接标有**

@media (min-width:600px) {

  .reseller_container {
    display: inline-block;
    position: relative;
  }

  .reseller_container p {
    position:absolute; 
    top: 17%;
    left: 10%;
    bottom: 0;
    right: 0;
    color: #000000;
    font-size: 3.5vmin;
    font-family: $bodyFontStack; 
    text-align:center;
    width:80%;
  }

  .reseller_text {
    position:absolute; 
    top: 95%;
    left: 0;
    bottom: 0;
    right: 0;
    color: #000000;
    font-size: 2vmin;
    font-family: $bodyFontStack; 
    text-align:center;
  }

  .reseller_header {
    position:absolute; 
    top: 5%;
    left: 0;
    bottom: 0;
    right: 0;
    color: #66BD00;
    font-size: 8vmin;
    font-family: ubuntu;
    font-weight:bold;
    text-align:center;
  }

  .reseller_container a {
    color:#66BD00;
  }

  .contact_button {
    display: block;
    position: absolute;
    top: 89%;
    left: 30%;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 40%;
  }

  .deal_icon {
   display:none;
  }

}

@media (max-width:600px) {

  .reseller_container {
    display: inline-block;
    position: relative;
  }

  .reseller_container p {
    color: #000000;
    font-size: 4vmin;
    font-family: $bodyFontStack; 
    text-align:center;
    width:100%;
  }

  .reseller_text {
    color: #000000;
    font-size: 2.5vmin;
    font-family: ubuntu; 
    text-align:center;
  }

  .reseller_header {
    position:absolute; 
    top: 4%;
    left: 0;
    bottom: 0;
    right: 0;
    color: #66BD00;
    font-size: 12vmin;
    font-family: ubuntu;
    font-weight:bold;
    text-align:center;
    line-height: 1em;
  }

  .reseller_container a {
    color:#66BD00;
  }

  .contact_button {
   display:block;
   margin:auto;
   width:80%;
   padding-bottom:5px;
  }

  .deal_icon {
   display:block;
   margin:auto;
   width:20%;
  }

}

这是它背后的CSS，特别是＆lt;的媒体查询。 600px似乎是问题所在。

{{1}}

非常感谢任何帮助。

Answer 1

对于低于600px的css，您需要将标题的高度设置为0.它会在较低分辨率上重叠您的内容。但是当它超过600px时，它在dev工具中重叠，但链接是可点击的。

无论如何，这是代码：

@media (max-width:600px) {

    ...

    .reseller_header {
        position:absolute; 
        height: 0;
        top: 4%;
        left: 0;
        bottom: 0;
        right: 0;
        color: #66BD00;
        font-size: 12vmin;
        font-family: ubuntu;
        font-weight:bold;
        text-align:center;
        line-height: 1em;
    }

    ...

}

Answer 2

这是因为以下规则。删除bottom: 0，你应该没事。这是一个溢出问题。

@media (max-width: 600px) {
  .reseller_header {
    position: absolute;
    top: 4%;
    left: 0;
    bottom: 0; /* remove this */
    right: 0;
    color: #66BD00;
    font-size: 12vmin;
    font-family: ubuntu;
    font-weight: bold;
    text-align: center;
    line-height: 1em;
  }
}

超链接图像在较小的屏幕上无法点击

2 个答案: