CSS Rounding在Safari中运行但不在Chrome中运行

2023年10月26日 171次阅读

我正在研究一些我正在研究的CSS问题.预期的内容是一个包含四个圆角的包装盒,一切都落入其中.它适用于Mac上的Safari,但不适用于Chrome或iOS.在这些浏览器中,角点是.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

最佳答案 圆形边框位于图像的后面,在此
http://tinkerbin.com/fLyD5Cuf处添加了填充顶部外观

点赞