很多朋友对浏览器兼容的问题搞得头疼,根据我的总结给出以下经验:
1.全面考虑IE系列,因为使用IE的用户是80%,无论是遨游还是腾讯TT都是IE的内核,火狐狸以前在谷歌的强势推广下获取的20%市场,现在谷歌又推出自己的浏览器,那么这个20%的市场就是留给了火狐狸、谷歌、遨游、360等来蚕食。所以大家搞定了一个IE基本上在这个一年内是你没有什么的问题。所以给大家一个工具:IETseter,它能够全面测试IE下的全部版本:IE5\IE6\IE6\IE8。
2.在编写代码的时候尽量将代码简单化,少用太多的ID,多用ID、标签和类进行组合。
传统的使用ID和类的编写方式:
#news
#news_left
#news_center
#news_center_title 新闻顶部
#more 更多
#news_center_mid 中间
#news_center_mid h1
#news_center_Bottom
#news_center_Bottom ul
#news_center_Bottom li
#news_right
#news_right_title
#news_right_content
.Panel 面板里面的项目
比如:
使用了ID标签组合了之后
HTML里面只用了三个ID,css样式如下:
#flash 左侧幻灯片
#news 新闻
#news h1 新闻标题
#news span 更多
#news h2 新闻标题2
#news p 新闻简介
#news ul
#news li 新闻列表
#Panel 面板
#Panel h1
#Panel ul
#Panel li
很多朋友可能感到很惊奇,为什么你能够做的这么简单,第一、这样做代码简单谁都能看懂,第二、非常利于seo标准。学习这些东西最简单的方式就是看看其他人的代码编写方式,比如网店,国内一些优秀的开源程序,比如康盛的x_space,所以,PHPCMS的网页代码常常被我重新编写。
我们就以X-space为例:
/*带缩略图的信息列表*/
.thumbmsglist { margin: 0; padding: 10px; list-style: none; }
.thumbmsglist li { padding-left: 100px; height: 100px; }
.thumbmsglist li div { float: left; display: inline; margin-left: -100px; text-align: center; border: 1px solid #DFDFDF; padding: 5px; width: 87px; w\idth: 75px; height: 87px; he\ight: 75px; position: relative; }
.thumbmsglist li div img { max-height: 75px; max-width: 75px; width: expression(this.width > 75 && this.height < this.width ? 75: true); height: expression(this.height > 75 ? 75: true); }
.thumbmsglist li p { margin: 0; }
.thumbmsglist li em { float: right; font-style: normal; margin-top: 6px; }
.thumbmsglist li em strong { color: 0; }
.thumbmsglist li h4 { margin: 0; line-height: 26px; height: 26px; overflow: hidden; font-size: 1em; padding-left: 5px; }
.thumbmsglist li h4 a { color: 54A6; }
.msgintro { background: #F5FCFF; padding: 15px 5px 0; height: 29px; he\ight: 14px; overflow: hidden; }
.thumbmsglist .msginfo { background: #F5FCFF url(../images/dotline_h.gif) repeat-x bottom; padding: 5px 5px 10px; }
我们精简后看看:
/*带缩略图的信息列表*/
.thumbmsglist
.thumbmsglist li
.thumbmsglist li div
.thumbmsglist li div img
.thumbmsglist li p
.thumbmsglist li em
.thumbmsglist li em strong
.thumbmsglist li h4
.thumbmsglist li h4 a
.msgintro
.thumbmsglist .msginfo
3.适当使用表格:
很多朋友很拒绝表格,应该是害怕表格,多表格恐惧,认为w3c标标准就是DIV,例如下面这样的情况:
如果上图的内容:我们要DIV最少要用9个DIV还要大量的类和标签来完成,但是我们用表格只要一个三行三列的表格就搞定了一切。忠告:学会使用表格,善用表格,web标准里面没有说表格不符合W3C的标准。 很多人说手机里面不兼容表格,问问大家现在有几个网站在手机上能上?
4.浏览器兼容性:
我们在用CSS进行构建网页的时候,IE6跟Firefox之间的差异问题可以用 !important 来解决(这种方法尽量少用),但是IE7似乎还是不认识 !important ,而且它跟IE6之间也存在一些差异。浏览器的不一致性总是让人很头疼!
下面分别给出IE6\IE7\Firefox的hack代码:
#example { color: 3; } /* Firefox */
* html #example { color: #666; } /* IE6 */
*+html #example { color: 9; } /* IE7 */
IE8里面只要在页眉里面加上这段代码就可以了:
<meta http-equiv="x-ua-compatible" content="ie=7" />
那么在Firefox下字体颜色显示为3,IE6下字体颜色显示为#666,IE7下字体颜色显示为9,他们之间互不干扰。