Position absolute for rounded corners and problems in IE6
Im using position absolute to give the top left corner of a DIV
a rounded corner.
HTML:
<div id="MyDiv">
Some content
<div class="topLeft"> </div>
</div>
CSS:
#MyDiv {
position: relative;
padding: 12px;
background: #fff url('graident.png') repeat-x top left;
}
.topLeft {
position: abs开发者_Python百科olute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: transparent url('corner.png') no-repeat top right;
}
This works fine in all browsers expcept IE6.
In IE6 the corner.png
image seems to be about 1px out at the top corner, essentially not top: 0; and right: 0; but more like top: 1px; right: 1px;
Can anyone explain why this might be happening only in IE6?
The only way I could find the make this work for IE6 is to add
margin-top: -1px;
margin-right: -1px;
to the topLeft class, but unfortunately that will mess up the display in other browsers
精彩评论