CSS3 transform:rotate() and several DIVs with position: absolute
When using a css3 transform:rotate() in div that contains elements with global positions.
<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>
Result in Firefox http://cjslade.github.com/Exp2/ff.png
Similarly in Opera and Safari. Chrome renders it fine.
Example http://cjslade.github.com/Exp2/
Does anyone have a solution?
Because the CSS3 transform specification is still a working draft, this kind of annoying bugs are still poping up in some browsers that still don't fully support the specification or simply because of bugs they have.
To workaround your problem and fill the 1 pixel gap around the corners, you can simply stretch the divs 1 pixel wider in order to cover up the gap.
I only changed the following properties marked with a comment // 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 demo Works fine in Firefox 6. Not sure about Opera and Safari, but should also work on these browsers.
I don't like this fix, but at the moment I don't see any other cleaner way
加载中,请稍侯......
精彩评论