IE/FireFox/Opera/Safari中border/outline/background的差异
程序员文章站
2022-07-08 23:02:56
...
做了一个图片编辑窗口，用来做裁剪、旋转、镜像操作。
原来是想用一个黑色半透明的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显示性能太让人失望了。。
原来是想用一个黑色半透明的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显示性能太让人失望了。。
上一篇： 初用ruby的几个注意事项