请教一个图片四角定位的问题
对于简单的圆角设计,可以将四个角切成小图片,然后分别进行定位,例如下面这种做法:
<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下却没问题,请教高手怎么解决这个问题?多谢:)
------解决方案--------------------ie7也不会有这个问题,估计是IE以前版本的BUG
------解决方案--------------------这个问题我碰到过到, IE确实有问题, 我也没有很好的解决办法.