CSS3 transform：rotate（）和幾個DIV，位置為：絕對

Question

在div中使用css3 transform：rotate（）時，其中包含具有全局位置的元素。

<html>
<style>
body {
    background: #666;
}

.sticker {
    position: absolute;
    top: 200px;
    left: 100px;
    width: 250px;
    height: 250px;
    background: #ccc;    
}

#sticker2 {
    -moz-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: 200px;
    left: 500px;

}


.sticker-decoration {
    display: block;
    font-size: 0.1px;
    position: absolute;
    z-index: 99999;
}

.sticker-n, .sticker-s{
    background: url(standart-sides-horizontal-f1f1f1.png) repeat;
} 

.sticker-e, .sticker-w {
    background: url(standart-sides-vertical-f1f1f1.png) repeat;
}

.sticker-se, .sticker-sw, .sticker-nw, .sticker-ne {
    background: url(standart-corners-f1f1f1.png) repeat;
}


.sticker-n {
    height: 38px;
    left: 0;
    top: -38px;
    width: 100%;
    background-position: top left;
}
.sticker-s {
    bottom: -38px;
    height: 38px;
    left: 0;
    width: 100%;
    background-position: bottom left;
}
.sticker-e {
    height: 100%;
    right: -38px;
    top: 0;
    width: 38px;
    background-position: top right;
}
.sticker-w {
    height: 100%;
    left: -38px;
    top: 0;
    width: 38px;
    background-position: top left;
}
.sticker-se {
    height: 38px;
    bottom: -38px;
    right: -38px;
    width: 38px;
    background-position: bottom right;
}
.sticker-sw {
    bottom: -38px;
    height: 38px;
    left: -38px;
    width: 38px;
    background-position: bottom left;
}
.sticker-nw {
    height: 38px;
    left: -38px;
    top: -38px;
    width: 38px;
    background-position: top left;
}
.sticker-ne {
    height: 38px;
    right: -38px;
    top: -38px;
    width: 38px;
    background-position: top right;
}

</style>

<body>
<div class="sticker">
    <div class="sticker-decoration sticker-n"></div>
    <div class="sticker-decoration sticker-e"></div>
    <div class="sticker-decoration sticker-s"></div>
    <div class="sticker-decoration sticker-w"></div>
    <div class="sticker-decoration sticker-se"></div>
    <div class="sticker-decoration sticker-sw"></div>
    <div class="sticker-decoration sticker-ne"></div>
    <div class="sticker-decoration sticker-nw"></div>    
</div>

<div class="sticker" id="sticker2">
    <div class="sticker-decoration sticker-n"></div>
    <div class="sticker-decoration sticker-e"></div>
    <div class="sticker-decoration sticker-s"></div>
    <div class="sticker-decoration sticker-w"></div>
    <div class="sticker-decoration sticker-se"></div>
    <div class="sticker-decoration sticker-sw"></div>
    <div class="sticker-decoration sticker-ne"></div>
    <div class="sticker-decoration sticker-nw"></div>    
</div>

</body>
</html>

Firefox中的結果http://cjslade.github.com/Exp2/ff.png

在Opera和Safari中也是如此。 Chrome使它很好。

示例http://cjslade.github.com/Exp2/

有沒有人有辦法解決嗎？

Answer 1

由於CSS3轉換規范仍然是可行的草案，因此在某些瀏覽器中仍會彈出此類煩人的bug，這些瀏覽器仍不完全支持該規范，或者僅僅是因為存在bug。

要解決您的問題並填充拐角處的1像素間隙，您可以簡單地將div擴大1像素以覆蓋該間隙。

我只更改了以下帶有注釋的屬性， // was...

.sticker-n {
    height: 38px;
    left: -1px;            // was   left: 0;
    top: -38px;
    right: -1px;           // was   width: 100%;
    background-position: top left;
}
.sticker-s {
    bottom: -38px;
    height: 38px;
    left: -1px;            // was   left: 0;
    right: -1px;           // was   width: 100%;
    background-position: bottom left;
}
.sticker-e {
    bottom: -1px;          // was   height: 100%;
    right: -38px;
    top: -1px;             // was   top: 0;
    width: 38px;
    background-position: top right;
}
.sticker-w {
    bottom: -1px;          // was   height: 100%;
    left: -38px;
    top: -1px;             // was   top: 0;
    width: 38px;
    background-position: top left;
}

jsFiddle演示在Firefox 6中可以正常工作。不確定Opera和Safari，但也可以在這些瀏覽器上使用。

我不喜歡此修復程序，但是目前我看不到其他更清潔的方法

CSS3 transform：rotate（）和幾個DIV，位置為：絕對

問題描述

1 個解決方案

解決方案1
0 已采納 2011-08-23 19:15:32

CSS3 transform：rotate（）和幾個DIV，位置為：絕對

問題描述

1 個解決方案

解決方案1 0 已采納 2011-08-23 19:15:32

解決方案1
0 已采納 2011-08-23 19:15:32