Rounded corners fail to cut off content in webkit browsers if position:relative

问题

Rounded corners fail to cut off content in webkit browsers (e.g. Chrome) if position:relative;

See this demo.

HTML:

<div class="outer">
    <div class="inner">
    </div>
<div>

CSS:

.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
}

Anyone know of a fix? Thanks-

回答1:

http://jsfiddle.net/USd5s/

Hate to add extra dom elements but a simple wrapper fixes this right up. You don't have to use my choice of element or css method either, span and qualified css is just my taste. or something would work just as well.

回答2:

You can force it to render in 3d with:

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);

回答3:

Simply set the inner to the same border radius as the outer.

.inner {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

Oh, and don't forget the webkit peoples. :]

回答4:

I had the same issue in a project and solve it with a little change in the CSS

instead of setting position to relative I set it to inherit:

.outer {
    background:yellow;
    border: solid 1px black;
    position: inherit;
    overflow:hidden;
    border-radius: 12px;   
}

And that solved perfectly the problem.

回答5:

I believe that I read somewhere that you have to clip the container to something in order to solve this problem. I'm not really sure, but I think that's the way to go.

回答6:

As Paul Said, Bug in webkit, But you can still get around it using margins on inner div.

回答7:

You can give the inner div the same border-radius: http://jsfiddle.net/eCsA3/8/

<div class="outer">
    <div class="inner">
    </div>
<div>

<style type="text/css">
.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
    -moz-border-radius: 12px;
    border-radius: 12px;   
}
</style>

回答8:

Please see this link. This solves your problem.

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

回答9:

Try this as the CSS for .inner:

.inner {
    background: red;
    height: 50px;
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    bottom: 1px;
}

You will need to tweak bottom and top to get the height right. If left unchanged, the class will only have a height of one pixel. This method will set the left and right margins to the border radius, so nothing appears on the edges.

Alternatively, if you have a solid color background around .outer you could make an image like this:

where the area inside (the checkered area in the image) is transparent and the area outside is the background color. Then use border image or absolute positioning to place it where the corners are. Give it a high z-index. When you scroll, the contents will be hidden underneath the filled part of the corner.

来源：https://stackoverflow.com/questions/6144398/rounded-corners-fail-to-cut-off-content-in-webkit-browsers-if-positionrelative

标签

html

css

webkit

rounded-corners