浏览器对居中的背景图片的兼容性
在IE5.5至IE7 、Safari、chrome中,当浏览器窗口少于内容宽度时,居中的背景图片转向以body左对齐。而在Opera及FF中,居中的背景图片依然以缩小的窗口宽度居中对齐,当浏览器窗口宽度少于内容宽度时,拖动横行滚动条就能察觉到页面内容与背景会有错位的现象。A1_Demo
Thems style: Alpha 10% Alpha 30% Alpha 50% Alpha 70% Alpha 90%
在IE5.5至IE7 、Safari、chrome中,当浏览器窗口少于内容宽度时,居中的背景图片转向以body左对齐。而在Opera及FF中,居中的背景图片依然以缩小的窗口宽度居中对齐,当浏览器窗口宽度少于内容宽度时,拖动横行滚动条就能察觉到页面内容与背景会有错位的现象。A1_Demo
此现状出现在IE7、FF、Opera、Chrome、Safari中,当浏览器窗口少于内容,拖动窗口横向滚动条时能发现定义在<><body>的背景会被裁掉,似乎<body>背景只计算了当前窗口的宽度。引起这问题的主要原因是在中定义了背景。在IE6不存在此问题。B1_Demo
在IE5~IE8、FF、Opera、Chrome、Safari中当浏览器窗口少于内容宽度,拖动横向滚动条会发现页面元素的背景及boder被裁掉,主要原因是body子级元素定义了100%宽度或是承继父及的100%宽度(即没有定义宽度)。C1_Demo
在IE7、IE8、FF、Opera、Chrome、Safari中当浏览器窗口少于<img/>宽度时,拖动横向滚动条会发现<img/>被裁掉,主要原因是<img/>父级元素定义了overflow:hidden;属性值。IE6中不存在此问题。D1_Demo