Question

我正在创建一个包含许多绝对定位元素的网站。我将它们包含在以页面为中心的“页面换行”中。它相对定位，因此所包含的元素相对于它布局。页面上的某些元素是其他页面的锚点，并且在：悬停时，这些元素会转换到另一个状态，使得它们看起来使用缩放变换和增加的框阴影从页面上抬起。

然而，当我将鼠标悬停在一个这样的元素上时，标记中跟随它的所有元素都表现出奇怪的行为，例如在过渡期间略微移位。如果它们未包含在页面换行中或者页面换行不再设置为相对定位（在这种情况下从布局角度来看基本相同），则不会发生此问题。

在我看来，好像页面换行以这些元素为中心，然后它们相对于它布局，这在某种程度上会影响转换的渲染，但我完全被卡住了。我已经尝试了所有我能想到的东西，现在正在寻求帮助。另外我应该说我只在Webkit浏览器上测试过这个问题，因此其他浏览器可能不会出现这个问题。

这是一些精简代码：

HTML：

<body>
    <div id="page-wrap">

        <a class="card" href="text.html"><div class="vert"><div class="card-content">
            Here is<br/>some text
        </div></div></a>

        <a class="card" href="somemore.html"><div class="vert"><div class="card-content">
            Here is<br/>some more text
        </div></div></a>

        <a class="card" href="evenmore.html"><div class="vert"><div class="card-content">
            Here is<br/>even more text
        </div></div></a>

    </div>
</body>

CSS：

body {
    background: hsl(60, 80%, 90%);
}

#page-wrap {
    margin: 0 auto;
    position: relative;
    width: 800px;
}

.card {
    background: hsl(80, 0%, 97%);
    box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    display: table;
    height: 150px;
    margin: 0px;
    position: absolute;
    width: 300px;
    -webkit-transition: all 0.2s linear;
}

.vert {
    display: table-cell;
    margin 0px;
    padding: 0px;
    vertical-align: middle;
    width: 100%;
}

.card-content {
    font: 40px 'Annie Use Your Telescope', cursive;
    margin: 0px;
    text-align: center;
    width: 100%;
}

a.card {
    background: hsl(120, 90%, 35%);
    color: hsl(60, 80%, 90%);
    text-decoration: none;
    text-shadow: -2px 2px hsl(60, 80%, 35%);
    z-index: 3;
}

a:hover {
    box-shadow: 0 0 40px 15px hsla(0,0%,0%,.3);
    -webkit-transform: scale(1.2);
}

Answer 1

将-webkit-backface-visibility: hidden;添加到 .card 。

已经回答here。

Answer 2

无法重现您似乎遇到的问题。也许一个jsfiddle.net的例子会好吗？

使用你的html＆amp; css，divs叠加在一起，从 .card 中移除position: absolute;并将其设为float:left。没有看到任何问题，然后还原并尝试将top:和left:值添加到div中，我遇到的唯一问题是所有div都在上面，添加了z-index:999到 .card：hover ，一切似乎都运行得很好。

尝试发布jsfiddle.net链接，我会尝试再看看它。

Answer 3

我在CodePen上“按原样”复制了您的代码。

我看不出任何问题。

绝对定位元素和CSS转换的问题

3 个答案: