日期:2014-05-17  浏览次数:20760 次

请教一个图片四角定位的问题
对于简单的圆角设计,可以将四个角切成小图片,然后分别进行定位,例如下面这种做法:
<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确实有问题, 我也没有很好的解决办法.