html - 链接无法在移动设备上点击

Question

我在php中插入了带有图片的链接，但是这些链接在移动设备上是不可点击的。我尝试了太多的方法来解决这个问题，但是失败了。我的网站在wordpress平台上运行。我不知道css代码或html代码中是否有错误。请帮助任何人。这是我插入的代码：

.gallery1 {
    border: 1px solid #ccc;
    border-radius:6px;   
}

.gallery1:hover {
    border: 1px solid #777;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    -webkit-transition: transform 1.05s ease-in-out;
    -moz-transition:transform 1.05s ease-in-out;
    -ms-transition:transform 1.05s ease-in-out;
}

.gallery1 img {
    width: 100%;
    height: auto;
    border-radius: 6px 6px 0px 0px;
}
.descr {
    padding: 1px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive1 {
    padding: 0 6px;
    float: left;
    width: 25%;
}

@media only screen and (max-width: 700px) {
    .responsive1 {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 480px) {
    .responsive1 {
        width: 94%;
        margin-left: 10px;
        padding-bottom: 20px;
    }
}

<div class="responsive1" style="padding-bottom:20px">
  <div class="gallery1">
    <a  href="https://www.cbshop.in/?couponid=4160&showid=4160_1449960893#itemid4160" target="_blank">
      <img src="https://www.cbshop.in/wp-content/uploads/2018/02/Flights-offer.jpg" alt="" width="300" height="200">
    </a>
    <a  target="_blank" href="https://www.cbshop.in/store/goomo-coupons/">
      <img src="https://www.cbshop.in/wp-content/uploads/2018/01/goomo-1493622670890.jpg" alt="" width="100" height="50">
    </a>
    <div class="descr"><a target="_blank" href="https://www.cbshop.in/store/goomo-coupons/?couponid=4160&showid=4160_1449960893#itemid4160">Flat Rs. 300 off on domestic airlines</a></div>
  </div>
</div>

Answer 1

将a元素设为块元素。实际上，它们是内联的，在小屏幕内它们的高度非常小。更准确地说，高度由line-height/font-size定义。

.gallery1 {
    border: 1px solid #ccc;
    border-radius:6px;   
}

.gallery1:hover {
    border: 1px solid #777;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    -webkit-transition: transform 1.05s ease-in-out;
    -moz-transition:transform 1.05s ease-in-out;
    -ms-transition:transform 1.05s ease-in-out;
}

.gallery1 img {
    width: 100%;
    height: auto;
    border-radius: 6px 6px 0px 0px;
}
.descr {
    padding: 1px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive1 {
    padding: 0 6px;
    float: left;
    width: 25%;
}

a {
 display:block;
}

@media only screen and (max-width: 700px) {
    .responsive1 {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 480px) {
    .responsive1 {
        width: 94%;
        margin-left: 10px;
        padding-bottom: 20px;
    }
}

<div class="responsive1" style="padding-bottom:20px">
  <div class="gallery1">
    <a  href="https://www.cbshop.in/?couponid=4160&showid=4160_1449960893#itemid4160" target="_blank">
      <img src="https://www.cbshop.in/wp-content/uploads/2018/02/Flights-offer.jpg" alt="" width="300" height="200">
    </a>
    <a  target="_blank" href="https://www.cbshop.in/store/goomo-coupons/">
      <img src="https://www.cbshop.in/wp-content/uploads/2018/01/goomo-1493622670890.jpg" alt="" width="100" height="50">
    </a>
    <div class="descr"><a target="_blank" href="https://www.cbshop.in/store/goomo-coupons/?couponid=4160&showid=4160_1449960893#itemid4160">Flat Rs. 300 off on domestic airlines</a></div>
  </div>
</div>