查看文章
 
浏览器兼容性与seo优化的网页设计技巧
2011-07-19 20:38

很多朋友对浏览器兼容的问题搞得头疼,根据我的总结给出以下经验:
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,他们之间互不干扰。


类别:技术交流||添加到搜藏 |分享到i贴吧|浏览(556)|评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
     

   
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2012 Baidu