Question

我在图像和叠加层之间得到了一个奇怪的3px间隙，看起来叠加在图像高度方面比3px高。当我将CSS更改为底部时，它可以工作：3px，但我认为这有点俗气。但不知道这个空间的来源。

这是我正在使用的代码？

HTML

  <div class="item col-50">
    <div class="image-hover">
      <div class="image-hover-inner">
      <a href="<?php the_sub_field('project_index_link');?>">
      <img src="<?php the_sub_field('project_index_image'); ?>">

        <div class="image-caption">                    
          <div class="image-caption-inner">
          <h3 class="heading"><?php the_sub_field('project_index_title');?></h3>
          <p><?php the_sub_field('project_index_description');?></p>
          </div>
        </div>
        </a>
      </div>
    </div>
  </div>

SASS

.image-hover {
    position: relative;

        a,
        a:hover {
            color:white;
        }
}

.image-caption {
    position: absolute;
    top:0;
    right:0;
    bottom:3px;
    left:0;
}

.image-caption-inner {
    position: absolute;
    top:50%;
    width:100%;
    display:block;
    -webkit-transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    transform: translatey(-50%);
}

JQUERY

jQuery(document).ready(function($) {
    $('.image-caption').hide();
        $('.image-hover').hover( function() {
        $(this).find('.image-caption').fadeIn(300);
        }, function() {
        $(this).find('.image-caption').fadeOut(300);
    });
});

Answer 1

这是因为您在图像后面渲染了空格（新行，制表符等）。浏览器尊重它们，这会导致不必要的差距。针对您的问题的简单修复是临时在0级别将字体大小设置为a，并将其重置为.image-caption的原始值：

.image-hover {
    position: relative;
        a,
        a:hover {
            color:white;
        }
}

.image-caption {
    ...
    bottom: 0;
    font-size: 16px;
}

现在你可以设置bottom: 0并且不用担心任何奇怪的差距。

演示：http://jsfiddle.net/f8pjqam1/

Answer 2

我使用了你的代码..我添加的东西只是.image-caption类的边框，这样我们才能看到覆盖的边界..

check the fiddle我之间没有发现任何差距......标题和描述都在图像的中间位置..

.image-caption {
    position: absolute;
    top:0;
    right:0;
    bottom:3px;
    left:0;
    border:1px solid red;  /* this line added */
}

你可以在小提琴的帮助下告诉我们，以便人们能够理解你的问题。

jQuery在悬停时使用图片标题加上额外的高度

2 个答案:

演示：http://jsfiddle.net/f8pjqam1/