background与border的恩怨情仇

　　background与border的恩怨情仇你了解多少呢？

　　它们之间究竟有什么关系，这个我也不知道，我只是想把一个曾经让我郁闷过一次的问题讲述出来，或许你碰上后就不必“重复”郁闷了。

　　话说那是一个风和日丽，万里无云的日子，我正在做着一个小站。突然，一个简单的东东让我咬掉了2mm的手指甲而不自知。

　　一切都緣起于一个类似的下图的效果，原图找不到了（那是距今约有5，6百个日日夜夜的一张图）：

　　（图一）

　　这种效果其实简单的来说就是中间这个背景图离边框的有1像素的间距。

　　假定这张背景图片为：test.gif

　　那么它的样式似乎可以写成：

.test {
  border:1px solid #000;
  background:url(test.gif) 1px 1px no-repeat;
}

　　然而就在这时，你也许就要碰到这个问题了，当然也可能碰不上。如果你仅仅是如上述代码所写，在非IE核心下的浏览中基本都可以无障碍实现背景图距边框左、上两边1像素。

　　但在IE下（IE8及以上未测试），会发现，背景图是和边框紧挨着的。效果如下图二所示：

　　（图二）

　　也就是说如果没有那background-position:1px 1px;（意思为background:url(test.gif) 0 0 no-repeat;
），那么背景将要和border重叠，这时背景将是从包括border在内的部分开始渲染的。效果将如图三所示：

 　　（图三）

　　而产生这一差异的原因归根到底都是IE的hasLayout在作怪。因为在IE中未被触发haslayout的元素，它的背景区域会将本身的border包括在内。

　　所以要解决这一差异，其实很简单，只需要触发该元素的haslayout = true就行。至于触发haslayout的方法有很多。比如：position,float,zoom,width,height等等，对于内联元素width,height只在IE5.X下和IE6及以上的quirks模式下触发hasLayout。

　　【例子演示】

　　无haslayout：http://www.doyoe.com/model/xhtmlcss/teach/backgroundborder/1.htm

　　有haslayout：http://www.doyoe.com/model/xhtmlcss/teach/backgroundborder/2.htm

[本日志由 飘零雾雨 于 2008-04-22 02:41 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: backgroundbackground borderborder haslayouthaslayout