Question

在使用3轴变时:四舍五入,含有具有全球立场的内容。

<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/

是否有解决办法?

Answer 1

由于CSS3改变规格仍然是一项工作草案,这种无休止的泡沫仍在一些浏览器中泛滥,这些浏览器仍然不充分支持规格,或只是因为它们有的 b。

为了解决你的问题,填补玉米周围的1个钢材空白,你可以把四舍五入到更宽,以弥补差距。

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

友情链接