请教一个图片四角定位的问题
对于简单的圆角设计,可以将四个角切成小图片,然后分别进行定位,例如下面这种做法:
<div style="position:relative; float:left; border:1px solid #656565;">
<div style="width:100px; height:100px;"></div>
<div style="position:absolute; width:4px; height:4px; overflow:hidden; background:url(http://cn.yimg.com/i/reg/gcr.gif); background-position:0 0; top:-1px; left:-1px;"></div>
<div style="position:absolute; width:4px; height:4px; overflow:hidden; background:url(http://cn.yimg.com/i/reg/gcr.gif); background-position:-4px 0; top:-1px; right:-1px;"></div>
<div style="position:absolute; width:4px; height:4px; overflow:hidden; background:url(http://cn.yimg.com/i/reg/gcr.gif); background-position:-8px 0; bottom:-1px; left:-1px;"></div>
<div style="position:absolute; width:4px; height:4px; overflow:hidden; background:url(http://cn.yimg.com/i/reg/gcr.gif); background-position:-12px 0; bottom:-1px; right:-1px;"></div>
</div>
----------------------------------
从代码及原理上看好像没什么问题,但是在使用过程中却发现一个问题:如果层内宽高为奇数的时候(比如将100px改为101px),在IE下外边框就出现一条直线,Firefox下却没问题,请教高手怎么解决这个问题?多谢:)