站点改进心得--CSS、JS在不同浏览器的兼容性问题 - []

网站宣布完成，进入后期的加工、修饰和完善阶段。考虑到近期要休婚假，所以工作积压在了国庆前后，加之近期领导要求的修改又多，简直忙疯了……很想像猫一样晒着太阳大睡，即使国庆7天刚刚过完。

小有成就的是解决了一些显示效果相关的技术问题，也就是css、js在不同浏览器、显示器显示效果的兼容性。

1.css在不同浏览器下显示效果不同

firefox和IE对某些css样式的认定有不少区别，包括：

• ul和ol的默认padding值是不一样的，在Firefox中，padding-left默认值为40px左右，而IE中为0，只能将它们指定为20px才保证在两个浏览器中显示效果一样；
• 对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大，也只能设置为14px了事；；
• 并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）；
• 对不规范代码的兼容情况不同，IE中漏掉的关闭符号对显示不造成影响，而firefox中就会形成错乱的布局，而在ie中用到的padding和margin的负值都会被firefox解析为0，易造成布局的混乱；
• firefox对于长高尺寸的严格解析会造成与设置不匹配（超出）的图片或表格将原设置div撑大；
• ！important属性可以在除IE浏览器的其他浏览器中起作用，因此有人利用这种差别来令一个CSS兼容多种浏览器；
• 未定义id的div，在IE中会与div属性中的其他设置有关，而在firefox中的位置会于div在文件中位置有关，紧随前一个div出现……

解决这种问题可以通过规范css代码，使其符合两种规范的标准样式，也可以在差别处利用！important对firefox设置属性，或者针对多种浏览器分别各自配置合适的CSS文件，再通过判断浏览器选择不同CSS实现兼容性，我选择的是最后这种方法。

2.显示器尺寸的适应问题

最初设计时，根据在某网站作的统计，使用800×600的显示器的用户数比例很少，可是随数据量的增大，这部分用户已达到 6.5%左右，不得不计入考虑。除首页CSS布局限制较为固定之外，其他所有页面的都使用％定义div宽度，则可以根据显示器分辨率自适应调节，以不影响显示效果，需要解决的问题主要是首页。

首页设计中，曾经考虑过这个问题，因此在左边的800×600分辨率可显示的区域是站点内容的主体，右边是新闻列表和一些宣传浮动图标的预留区，因此只要在用户浏览时令横向滚动条消失自然就可以了。

许多网络上的经验都是在body中设置overflow-x属性为hidden来实现
body { overflow-x : hidden ; }
不过我用此方法测试多次都无效，后来才在charles大侠blog中发现原因：

3.动态top按钮对本人制作的CSS和DIV的不兼容

利用js文件制作的top按钮，一种经典的显示效果，即按钮可以随着屏幕的滚动在屏幕上滑动（速率变化），始终保持在合适的部位。可是曾经用在html文件中没有问题在本人的css+div布局中就屡屡报错，不是显示部位不对，就是被别的层遮挡住，或者没有那种自上而下随屏幕滚动平滑下移的效果。经笑笑帮忙测试，在其他的html和div布局中都能显示正常，因此可能与本人css属性中过多使用z-index属性有关。最终问题也没有解决，只是中和成令一种固定位置的top按钮。两种方案分享如下。

滑动的top按钮（鼠标移动上去可以变换图片）

固定的top按钮（似乎应该是固定在屏幕的某个位置，只是于我的css不兼容）

4.某些js导航菜单对forefox兼容性不好

本来用jsmenu做了一个导航菜单，是移动到一级栏目横向显示此目录下分类的效果，但是在firefox中显示后就无法隐藏了，最后多个层叠加在一起很混乱。js与firefox之间的兼容性问题主要有以下一些（摘自站长吧的《JS的IE和Firefox兼容性汇编》）：

1. document.form.item 问题 2. 集合类对象问题 3. window.event 4. HTML 对象的 id 作为对象名的问题 5. 用idName字符串取得对象的问题 6. 变量名与某 HTML 对象 id 相同的问题 7. event.x 与 event.y 问题 8. 关于frame 9. 在mf中，自己定义的属性必须getAttribute()取得 10.在mf中没有 parentElement parement.children 而用 11.const 问题 12. body 对象 13. url encoding 14. nodeName 和 tagName 问题 15. 元素属性 16. document.getElementsByName() 和 document.all[name] 的问题

由于对JS不够熟悉，只能转而寻求其他方法。后来使用了css和div联合控制的菜单，效果很好，尤其是提出将导航菜单做到程序中调用，可以显示出“where are you"的效果。如今网页头部和菜单已全部抽出，令人欣喜的是在新增了top按钮的情况下耽搁页面的文件一般在5、6k上下（除个别含多个表格的页面），与CSS改版前的25k左右，和导航抽取前的12k左右相比又减少了许多。同事用.net通过传参调用就改进了导航菜单，还将其抽取到一个文件中，较之 DW的模板更新又大大进了一步，会编程真了不起。

最近为这些问题忙得头晕脑涨，总觉得明天就是周末了，据此也总结出每周5天上班的工作安排和状态调整的心得。诸如，周一、周二是周末休息后的工作状态调整期，开始安排和逐渐进入连续作战状态，周三是缓冲期，安排妥当准备就绪，调整好身体状态，周四周五就要做拼命三郎了，将计划和安排一气呵成圆满结束本周的短期计划，就算非常疲累也没关系，周末就可以好好休息了……就是因为这周一开始就拼命了，今天才周二已没有了后劲……

吸取经验教训，今天不加班～

http://roozeno.blogbus.com/logs/3560080.html