图片下方的可点击区域过多答案

【问题标题】：Excessive clickable area below image图片下方的可点击区域过多
【发布时间】：2013-08-14 05:22:09
【问题描述】：

我不知道为什么我画廊的每个缩略图下方都是可点击的空间。如果我在 pcs div 上使用 float:left，则过多的可点击区域会消失，但背景也会消失。我在任何地方都找不到答案。我是网页设计的新手。非常欢迎您的帮助。

HTML

<body background="hexagons.jpg" style="background-attachment: fixed;">


<div id="rect">
<script>
 var obj = document.getElementById("rect");
 obj.style.width = screen.availWidth / 1.2509 + 'px';
 obj.style.left = screen.availWidth / 10.50769 + 'px';
</script>
  <div id="logo">
    <img src="em.jpg" width=100% height=100%>
  </div>
  <div id="menu">
   <ul>
     <a href="index.html"><li>Pradžia</li></a>
     <a href="Galerija.html"><li>Galerija</li></a>
   </ul>
  </div>
<div id="pcs" style="background-image: url(metal.jpg); background-size:100% 100%;  height:auto">
<a class="fancybox" href="galerija/atlikti_darbai_1.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_1.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_2.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_2.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_3.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_3.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_4.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_4.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_5.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_5.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_6.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_6.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_7.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_7.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_8.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_8.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_9.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_9.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_10.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_10.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_11.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_11.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_12.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_12.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_13.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_13.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_14.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_14.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_15.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_15.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_16.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_16.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_17.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_17.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_18.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_18.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_19.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_19.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_20.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_20.jpg"></a>  
<a class="fancybox" href="galerija/atlikti_darbai_21.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_21.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_22.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_22.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_23.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_23.jpg"></a>
<a class="fancybox" href="galerija/atlikti_darbai_24.jpg" rel="galerija"><img class="pic" src="thumbs/atlikti_darbai_24.jpg"></a>
 </div>

<script>
 var obj = document.getElementsByClassName("pic");
 var size = obj.length;
 var wdth = (parseInt(document.getElementById("rect").style.width) - 800) / 8;
 for(var i = 0; i < size; i++)
 {
     obj[i].style.margin = wdth - 2 +'px';
 };
</script>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
</script>    
</body>

</html>

CSS

#rect
{
    margin: 0px;
    padding: 0px;
    position:absolute;
    top:0%; left:130px;
    width:1092px;height:100%;
}

#logo
{
    background-image: url(em.jpg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    height:247px;
    margin:0px;
    padding:0px;
}

#menu ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    padding-top: -20px;
    padding-bottom: 0px;
}

#menu ul a
{
    margin: 0px;
    padding: 0px;
    float: left;
    display: inline;
    width: 50%;
    background-image: url(h_b1.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position:relative;
    text-align: center;

}

#menu ul a li
{
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    color: #300;
}

#vertical_div
{
    margin:3px;
    width:3px;
    background-color:silver;
}

#text
{
    width: 600px;
}

.pic
{
display:inline;
}

【问题讨论】：

使用 CSS 重置/标准化！

标签： javascript html css web clickable-image

【解决方案1】：

欢迎来到@lysergic 的网页设计世界。

默认情况下，浏览器可能会导致不需要的margin/padding 出现在您的HTML 中的元素上。要解决此问题，您可以使用 CSS reset。

或者一个非常快速的解决方法，把它放在你的 css 文档的顶部：

* {
   margin:0;
   padding:0;
}

* 是一个通用选择器，它将针对您页面上的所有元素并设置一个margin and padding of 0。

【讨论】：

@jawad 不确定这是恭维还是侮辱......他是新人，我们都是新人，所以我觉得应该好好解释一下。
哈哈。没有伴侣。与像我这样不花时间或精力发布答案的懒惰驴相比，这是一种恭维。来自 2 +，至少 1 来自我
感谢您的快速回复。我已经尝试了你的解决方案，但仍然遇到同样的问题。图像的边距和填充不是可点击的，但缩略图行之间是可点击的条。这是我的“头痛”的截图：link（红色矩形添加了油漆）