关于background-attachment的研究

WEB前端 无名氏 10564℃ 百度已收录 扫描二维码

最近做了一个页子,用到了background-attachment的属性,开始没注意,在chrome和maxthon上看的都正常。也就没用ietester看。后来让一个同事看,很火爆,页子全白了。

ie下background-attachment完全没起作用。

于是google,仿佛网上的类似文章极少。基本没有。下面是找到了一篇,具体分析了一下各浏览器下的兼容问题。

background-attachment是在设置fixed时才是相对body定位;
IE7是支持background-attachment:scroll的;
我发现了很多疏漏之处,马上重新整理了一下。
关于background-attachment,针对IE系列浏览器的特性如下:
IE6:默认效果scroll,设置scroll效果正常,设置fixed正常。(IE6完美支持;和标准浏览器的表现却天壤之别)
IE7:默认效果scroll,设置scroll效果正常,设置fixed背景图像位置重置。(一半像IE6一半像IE8,承上启下?)
IE8:默认效果fixed,设置scroll后是fixed效果,设置fixed背景图像位置重置。(最接近标准浏览器的表现)
希望通过此整理,对background-attachment会有更清晰的认识:)
IE系列,在这方面的表现,的的确确令人头痛。个人感觉IE7目前的状况是比上不足比下有余,食之无味弃之可惜。对用户来讲或对开发人员来讲,都是很让人别扭的一款浏览器。希望IE高级版本能尽快取代老版本浏览器形成统一,也希望Windows7能取代XP和惨死的Vista,捆绑着最新版的IE浏览器,带着开发人员又爱又恨的感情,在不久的未来迅速普及下去……再说就扯远了,继续工作。

============================================
Update 2008-9-12 10:43:27:
今天测试时突然发现昨日研究过程中有个遗漏:IE7居然完全不支持元素中的fixed方式。在IE7中不设置background-attachment的话,溢出滚动后默认居然是scroll的效果,设置background-attachment:scroll后效果不变,而设置fixed后仍然会导致background-position问题。看来IE7对这个属性的支持是很有问题的,我会继续关注这个问题,抽空再作研究。
============================================
background-attachment引发的血案……
今天在CSS森林的群里,遇到群老大

一,有两个div在同一页面里,都有背景,宽高一样,有y方向滚动条
二,其中一个背景是固定的,即不滚动(fixed)
三,这两个div是平级的,并且其内部结构可以按需更改(可以更改结构使得实现起来方便多了)

background-attachment,是否只能用于html和body?
=========================抓狂的分隔线===========================
带着这些问题,我闷头苦练了将近一个上午(工作计划被打乱T.T)……
首先针对第二个问题,得出以下结论(关于background-attachment的特性):
1.background-attachment在标准浏览器中(即IE6以外的浏览器),仅在html和body中才起作用(html和body的background-attachment默认是scroll,可以设置成fixed;其他元素overflow:scroll滚动时的background-attachment始终是fixed,并且设置scroll无效);
2.IE系列(IE6-8)在不指定文档类型的时候(进入quirks mode模式),元素中的background-attachment支持scroll和fixed,而FF等其他内核浏览器仍然无效。
3.在不给元素设置background-attachment,并且该元素overflow:scroll滚动时,标准浏览器中默认是fixed效果,而在IE6中默认是scroll效果。
4.在IE6下,不管在任何时候设置background-attachment的fixed或scroll都起作用;即,IE6支持任何元素的background-attachment的一切(IE6的无敌兼容爆发?)。
延伸问题:在IE6以外的标准浏览器中,设置除body、html外其他元素的background-attachment:fixed后,这些元素的background-position将以body和html为基准进行定位,这个特性所带来的灾难是:如果页面下方两个元素都具有background-attachment并且都没有设置background-position,那么他们的背景将重叠在页面的左上角处并且不予显示,不管这两个元素身在何处。在页面中的表现是,两二个元素的背景离奇消失)。
此问题详见DEMO:背景消失之谜
=========================抓狂的分隔线===========================
得出以上结论后,再回头来看鬼提出的需求,感觉思路清晰多了:P
解决思路如下:
首先设置这两个DIV为#C1(fixed),#C2(scroll)。
1.先考虑fixed的#C1,在标准浏览器里实现fixed很简单,压根不需要考虑什么background-attachment,直接设置背景图片即可;不过在另类的IE6下,如果不指定background-attachment,它却将是scroll的效果。怎么办,直接hack(_background-attachment:fixed)搞定。
注:如不用hack直接用background-attachment:fixed,将会导致上面所说的\”背景消失\”问题。
2.再考虑scroll的#C2,想要达到scroll效果其实并非易事:各大标准浏览器并不\”允许\”你这样设置一个内部元素(IE6在这时却表现的特别亲切,看看这个让人反感的IE6!>.< #)。该怎么办?单单一个DIV似乎没有办法做到这个要求,那么……看来只能更改结构了。OK,再在#C2中加入一个修补元素

,让#C2只负责滚动,而让patch来承载背景图片和其他内容,这样滚动的时候内部文档流就会随着滚动条,自然而然地scroll了,从而也避免了使用这该死的background-attachment所带来的一切困扰。:P
最终实现的DEMO如下:
DEMO:两个div,一个fixed一个scroll
=========================抓狂的分隔线===========================
一点感想和猜测:
不知道w3c有没有在它的某些文档中提到过background-attachment的这些特性,之前也从未接触过这方面的资料。我们在这些DEMO实例中可以明显感觉到,w3c貌似并不提倡我们在html和body以外的元素中使用background-attachment,并且拒绝让我们在这些元素中使用background-attachment:scroll的滚动效果。这个原因目前尚不清楚,是否由于这种效果可以用一些简单的结构很轻松的做到,抑或是由于需求量很少,还是考虑到其他我们所想不到的原因,而取消这个效果?而让我感到很意外的是,IE6中居然可以很完美地支持background-attachment,让人感觉哭笑不得。
最后,从这几个DEMO和实践中可以看出,background-attachment只适合用在html和body上。至于其他元素的背景,我们还是尽量让他们规矩点吧。

http://50377057.diandian.com/post/2011-08-11/3755977


喜欢 (0)分享 (0)