CSS 舍入在 Safari 中有效，但在 Chrome 中无效

Question

我在处理一些 CSS 时遇到问题。预期的内容是一个包含所有内容的四个圆 Angular 的容器。它适用于 Mac 上的 Safari，但不适用于 Chrome 或 iOS。在那些浏览器中， Angular 是正方形的 .posttype 和图像。我似乎无法弄清楚是什么导致了这个问题。任何帮助都会很棒。

CSS:

.row { margin-bottom: 50px; }
.box { background: #eee; }
.shadow { -moz-box-shadow: 0px 3px 3px 0px #666; -webkit-box-shadow: 0px 3px 3px 0px #666; box-shadow: 0px 3px 3px 0px #666; }
.rounded { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: block; overflow: hidden; }
.posttype {
    float: right;
    position: relative;
    width: 150px;
    height: 150px;
    text-transform: uppercase;
    margin: -85px -85px 4px 4px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform:rotate(45deg);
    overflow: hidden;
}
.posttype > p { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    text-align: center;
    font-size: 24px;
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    color: #fff;
    opacity: 0.3;
}
.meta {
    width: 110%;
    margin: 5px -8px -8px -8px;
    padding: 5px;
    background-color: rgba(255,255,255,0.8);
    box-shadow: inset -5px 1px 5px #555;
    font-size: 10pt;
    color: #555;
}
.photo { position: relative; }
.photo > p { padding: 0 8px; }
.photo > .meta { padding-left: 16px; padding-bottom: 16px; }
.photo > img, .photo > a > img { width: 100%; margin-bottom: 10px; }
.photo > .posttype { position: absolute; top: 0; right: 0; margin: -75px -75px 4px 4px; }

HTML:

<div class="row">
    <div class="span7 box rounded shadow photo">
        <img src="photo.jpg" alt="Alt" width="500">
        <div class="posttype"><p>photo</p></div>
        <p>This is a great picture.</p>
        <hr class="clear">
        <div class="meta">
            <ul>
                <li class="date"><i class="icon-time"></i> <a href="#" title="date">7/29/12</a></li>
                <li class="comments"><i class="icon-comment"></i> 3 Comments</li>
            </ul>
            <hr class="spacer">
            <ul class="tags">
                <li class="tags"><i class="icon-tags"></i></li>
                <li class="tag"><a href="#" title="Tag1">Tag1</a></li>
                <li class="tag"><a href="#" title="Tag2">Tag2</a></li>
            </ul>
        </div>
    </div>
</div>

现场演示:Tinkerbin

Answer 1

圆形边框在图像后面，添加一个padding-top 看这个http://tinkerbin.com/fLyD5Cuf