ofbiz的全浏览器兼容性调整

近期，本人一直在做ofbiz的全浏览器兼容，现在已经搞定了，特此写点东西分享

全浏览器？其实主要工作还是在IE6上，其他浏览器问题不多，就不说其他浏览器问题了。Ofbiz在IE6下可谓“面目全非”啊，没法正常使用。可能从一开始ofbiz就没有打算兼容IE6吧，想想也对，被微软遗弃的孩子谁会兼容啊。可是，客户几乎多半系统都是在IE6环境下，所以这个IE6的兼容必须要搞。

废话已尽，下面谈谈这些问题，我只归类，不提供具体实现code.

兼容性其实本质就是利用不同浏览器的不同支持以及bug(CSS hack)。
下面给出2个CSS hack
1、
IE6支持属性命名前加“_”.唯一标识IE6，其他浏览器都不支持
2、

CSS hack
一、图片引起的问题
问题：
Ofbiz在IE6下，png的图片几乎都成灰底图片。

原因：是png-32b图片在IE6下没办法完全透明和半透明。

解决：
利用微软浏览器滤镜实现透明，当然这个用多了会影响页面加载效率的，好在ofbiz类似处理不多。

语法：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' Example.png'); /* IE6 */
background-image: none; /* IE6 */
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。



注意：如果你的png图片是个链接的话，那么滤镜处理后链接会失效。需要给链接加上position:relative;

二、位置问题

大部分的变形，移位问题，主要是支持的原因，这里不多说了。了解IE6与其他浏览器不同之处，找出问题所在，对症下药。



三、浮动元素无法显示在select元素之上

问题：如ofbiz菜单，在其他浏览器可以正常遮盖住select，但是IE6下，根本遮盖不住，select会刺穿菜单显示于上层。

原因：据说是IE6的国际性bug.

解决：利用透明的iframe遮盖住select。
<iframe style="width:100%;filter:alpha(opacity=0);border:solid;-moz-opacity:0;position:absolute; z-index:-1"></iframe>

注意：遮盖成功后，每次请求会弹安全信息框，很是烦人，解决办法就是在iframe中引用一个空页面

大致的东西就这些，细节的方面就不多说了。本人兼容性调整后IE6/7/8/9,FF.完美运行

juck.iteye.com

ofbiz的全浏览器兼容性调整

猜你喜欢