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

做了一个图片编辑窗口，用来做裁剪、旋转、镜像操作。
[img]http://www.iteye.com/topics/download/910bff76-f4a5-4700-84fa-c27a6215da12[/img]

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

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

[img]http://qiezi.iteye.com/topics/download/b47475a9-db04-4d7f-826b-b8dd7645f433[/img]

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

尝试使用outline代替border，这个应该是比较一致，不过在opera中，快速拖动时会出现多条白线。
[img]http://qiezi.iteye.com/topics/download/6f0bc4c8-b943-49c2-8b81-07212d7918fd[/img]


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

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