4

I'm having an issue with some CSS I'm working on. The expected content is to be a containing box with four rounded corners that everything falls into. It works in Safari on the Mac, but not in Chrome or in iOS. In those browsers, the corners are squared for the .posttype and the image. I can't seem to figure out what is causing the issue. Any help will be great.

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>

Live demo: Tinkerbin

4

1 回答 1

2

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

于 2012-07-29T17:09:06.687 回答