IE/FireFox/Opera/Safari中border/outline/background的差异

做了一个图片编辑窗口，用来做裁剪、旋转、镜像操作。


原来是想用一个黑色半透明的mask遮住图片，再用一个div设置背景图和正一样，拖动时设置背景图偏移即可。后来发现backgroundPosition在IE和FF中不一致。

改成一张背景加4个mask的方式，不存在图像对不准的问题。



新的问题是IE中的border的宽度是包含在div宽度里的，其它浏览器则不包括这个宽度。

尝试使用outline代替border，这个应该是比较一致，不过在opera中，快速拖动时会出现多条白线。



最后还是选了第２种方式，需要判断浏览器类型，如果不是ＩＥ，就要把拖拽框的宽和高各减去２个边框宽。

显示性能方面，Mac OS X上的3大浏览器都要差一些，Opera和FF的性能比Linux和Win上都要差，Win性能最高。所有平台上，Opera性能都是最好的，Firefox次之，然后是IE，Safar显示性能太让人失望了。。

评论

4 楼 qiezi 2007-07-12  

玩的

3 楼 sleets 2007-06-29  

这个是什么项目啊？ 我以前也接触过类似的。

2 楼 qiezi 2006-11-30  

前台用javascript，后台是用rmagick处理的，不过内存占用比较多，打算改成直接调用外部的ImageMagick.

1 楼 together 2006-11-29  

几个浏览器在一些地方是有差异的，比如像素、table/tr/td事件、css解析上。
PS:你的这个图像处理工具，是自己写的吗？用什么写的？不错不错