网页界面的一点心得

这几天在折腾网页界面，其中有些要求位置、大小控制得比较精细，而且要在4个主流浏览器（IE, FF, Safari, Opera）上都一致。

经过测试，发现主要是border在IE和其它3个之间表现不一致。IE的border是往里面画的，这样就没有增加宽度，其它浏览器的border是往外画的。如果直接在一个图片上加border，结果大小就有偏差，最好的做法是不在图片上加，而在它外面套一个DIV，给这个DIV指定border即可，在几个浏览器上显示结果完全没有偏差。

outline应该是往外画的，但在opera上它会有一些不良影响，在IE上似乎根本没有使用这个属性，所以就不考虑它了。

另外一个要重点考虑的浏览器是Maxthon，基于IE内核，号称有几千万用户，我自己在windows上就用它。Maxthon有个超级拖拽功能，如果用脚本来拖拽一个图片，就可能和它的超级拖拽冲突，结果图片在一个新窗口中打开，这应该不是你想要的。解决办法有2个，1是在图片上面放一个一样大的DIV，定位有点麻烦；2是不用IMG，直接在DIV的背景图里指定这个图片，就不再有这个问题了。