Div+CSS速成第十天:div+css网页标准布局实例三

 

如上图，先点1中的查看页面元素按钮，然后鼠标移动到2的地方，将会出现图中所示的蓝色线框，然后点击鼠标，会在插件中选中3位置的代码并在4位置出现对该区域生效的所有样式，即是上边框选部分的代码和样式，当鼠标移动到圈4位置时，会出现一个禁止图标，点击后禁用当前样式，这样便于查找问题所在，另外还可以在后边双击插入新的样式。
另外，如果你装的是IE8浏览器，同样具备类似的功能，打开浏览器后，按F12键，即可打开该功能，使用方法和火狐的firebug类似。
希望大家多多研究，对查找问题能起到事半功倍的效果。不过这些修改只停留在浏览器层面，不会对你本地和服务器上的文件做任何改动，查找到哪里出问题后，及时在dw里将出错的地方改过来。
学会了怎么调试页面后，兼容问题也是一个不容忽视的问题，现在浏览器市场鱼龙混杂，别的不说，IE的6/7/8版本兼容就够让人头疼了，现在又出了个IE9，还有火狐、chome、opera、Safari等等，而且标准不统一，一片混乱的状况。从下图中标准之路网站的访问情况来看，目前IE6仍然占最大比重，而IE6恰恰也是让设计者最为头疼的浏览器，bug太多了。鉴于这种混乱情况，目前只用考虑兼容最常用的IE6/7/8和firefox就可以了，其它使用人数很少的浏览器可以暂不考虑。只要我们掌握了各个浏览器的特性，避免一些使它解析错误的写法，还是不用太多的css hack就可以使页面在各个浏览器下显示基本一致，所以这个需要大家的多观察，多实践，多总结。

因IE浏览器的特殊性，一台电脑同时只能装一个版本的IE浏览器，不过呢有高人提供了IE Tester，把IE的几个版本集成到一块，专门供测试兼容使用。大家可以下载安装一下，测试下页面在各个浏览器下的显示效果。