Question

我正在建立一个＆＃34;员工＆＃34;页面有液体，四列布局。我已经放置了一个div元素，绝对位于每个工作人员照片的顶部，充当按钮/链接。我的问题是，当我将这个叠加div对齐时：0和右：0当我调整窗口大小时，我将在图像和叠加层之间偶尔出现1个像素间隙。这似乎是某种舍入误差的函数。

我已经在这个网站和其他人的网站上搜索了这方面的帮助，但我还没有发现这个问题在任何地方都有明确的讨论。任何见解都非常感谢。

有问题的页面可以在这里看到： communicationdesign.com/cwt-beta/about.html

调整窗口大小以查看偶尔的错误/间隙......

以下是相关标记：

<div class="staff-block">
    <div class="staff-photo">
        <a href="gruber.html"><img src="img/gruber.jpg" class="portrait" /></a>
        <a href="gruber.html">
            <div class="plus-link">
                <div class="plus-sign">&#43;</div>
            </div>
        </a>
    </div>
    <div class="caption">
        <a href="gruber.html">Drew Gruber</a><br /><span class="job-title">Executive Director</span>
    </div>
</div>

这是CSS：

.staff-block {
    position: relative;
    width: 22.3%;
    float: left;
    background-color: #ffc;
    margin-right: 3.5%;
}
.staff-photo{
    position: relative;
}
.staff-photo img, .board-photo img, .bio-photo img {
    width: 100%;
}
.portrait {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}
.plus-link {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}
.plus-sign {
  background-color: rgba(255,204,78,0.8);
  color: white;
  font-size: 40px;
  line-height: 30px;
  padding: 4px 8px 6px;
}

Answer 1

使用百分比时，这是一种职业危害。你可以使用这样的黑客：

.staff-photo{
    overflow: hidden;
}

.plus-link {
  background-color: rgba(255,204,78,0.8); // color on the plus sign parent 
  position: absolute;
  bottom: -5px; // position it over the edge
  right: -5px;
  padding: 0 5px 5px 0; // and correct the extra space
}

.plus-sign {
  background-color: transparent; // or remove bg color
}

在百分比宽度元素上对齐div叠加

1 个答案: