底部：0 - 缩放时的奇怪行为

Question

我在缩小网页时遇到了一些奇怪的行为。我有一些divs 持有一个标题和<p>overlay。当用户将鼠标悬停在 div 上时，我希望 <p>（在叠加层中）显示，当用户不悬停时，我希望 <p> 不显示。

当用户在浏览器中缩放为 0 时，这可以正常工作，但是当用户缩小时，我可以看到 <p> 部分。在缩小的同时，我可以增加bottom 来纠正这个问题，但一定有一些我遗漏的东西。

有没有办法在缩小时隐藏<p>？

我知道这听起来一定很疯狂，所以我做了一个粗略的 JSFiddle 来展示我在说什么。奇怪的是，当缩小 JSFiddle 时，我在浏览器 (safari) 中遇到的问题并没有在他们的网站上发生。

http://jsfiddle.net/FB2TM/

任何帮助将不胜感激！

我应该提到我打算制作鼠标悬停效果的动画。

Answer 1

发生这种行为是因为浏览器没有按比例调整文本大小，最终导致文本大于应有的大小。调整大小时，您还会在不同的浏览器上体验到不同的文本大小。

我发现最好的解决方案是通过完全隐藏不应该显示的文本来做不同的事情：

.box {
  width:200px;
  height:200px;
  background-color:aqua;
  position: relative;
  overflow: hidden;
}

.caption {
  width:200px;
  color:white;
  background-color:black;
  left: 0;
  z-index: 2;
  bottom: 0;
  position: absolute;
}

.caption p {
  display: none;
}

.box:hover .caption {
  bottom:0;
}

.box:hover .caption p {
  display: block;
}

http://jsfiddle.net/FB2TM/2/

Answer 2

从隐藏具有负偏移量的文本的方法更改为仅隐藏要隐藏的文本可能会稍微改变您的 css 动画选项。它确实允许从 css 中删除 z-index。

<div class="box">
    <div class="caption">
        <div class="title">THE TITLE</div>
        <p>These are words, I do not want them to show, until mouseover. When zooming out, I can see these words.</p>
    </div>
</div>

和你的CSS到：

.box {
    background-color:aqua;
    height:200px;
    position: relative;
    width:200px;
}
.caption {
    background-color:black;
    bottom:0;
    color:white;
    position: absolute;
    width:200px;
}
.caption p {
    display: none;
}
.box:hover p {
    display: block;
}

jsFiddle

Answer 3

我建议使用 top 并使用 margin-top 固定位置。例如：

.caption {
    width:200px;
    color:white;
    background-color:black;
    left: 0;
    z-index: 2;
    top:100%;
    margin-top:-30px; //Height of THE TITLE
    position: absolute;
}
.box:hover .caption {
   margin-top:-116px; //Height of .caption
}

我认为使用底部不是一个好习惯。

这是您的小提琴的更新：http://jsfiddle.net/FB2TM/3/