1
我正在製作一個網站，其中包含大量絕對定位的元素。我將它們包含在以頁面爲中心的「頁面換行」中。它的位置相對較好，所包含的元素相對於它被佈置。頁面上的某些元素是其他頁面的錨點，並且在：hover上時，這些元素會轉換到另一個狀態，使其通過縮放轉換和增加的箱體陰影顯示爲脫離頁面。絕對定位元素和CSS轉換的問題
但是，當我將鼠標懸停在一個這樣的元素上時，所有標記後面的元素都顯示出奇怪的行爲，例如在過渡期間略微移動位置。如果它們不包含在頁面封裝中，或者頁面封裝不再設置爲相對定位（在本例中基本上與佈局透視圖基本相同），則不會發生此問題。
在我看來，好像頁面包裝居中這些元素，然後他們相對於它佈置的事實是以某種方式影響轉換的渲染，但我完全卡住了。我嘗試了所有我能想到的，現在正在尋求幫助。另外我應該說我只在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);
}
你是一個拯救生命的人。感謝您的發現。我無處不在尋找解決方案。 – SethGunnells 2013-02-10 22:41:01