院网前端总结

回想在工作室的日子——贝塔豪斯工作室,已经近两年了,带着一直以来对小贝贝的那份自始至终的向往和从未改变过的约定,回忆着和老师、小伙们相处的日子。这段,一起去经历,一起分享的日子。一直,归属感和责任感并存。慢慢,已经变成生活的全部。

这次的学院门户网站,是我在工作室做的最后一个校园网站。记得,从刚开始进工作室的招生网开始,然后是一系列的办公网、办公系统、研究生网站、任务管理系统等等,一直都是在做校园网站。虽然有时候挺让人羡慕的,但是有过很多辛酸的过程、熬夜的记忆,有付出了全部时间和精力却未被认可过的经历,有过程中遇见的分歧到最后的统一,有中途不断的变更和修改,有不被理解的时候,也有要在一两天赶出任务的时候。

没想到最后,能有幸碰上学院门户网站的改版的机会,这个捷点公司做的却一直是我们在维护的网站。记得有段时间,每天都会去看看有没有出现新的问题,经过这段时间总算平息了。


关于这次的院网技术上的问题

老规矩,放上遇见的问题:

  1. 兼容性问题(要求:兼容ie6)

    • PNG-24在ie6中的问题

    • 列表中标题和日期在ie6中错位的问题

    • 兼容ie6带下拉的导航

    • ie6中的选择器:hover问题

  2. 写法问题

    • 网站优化中<h1>-<h6>的使用

    • 尽量不要写多余没用的代码,特别是多层<div>


解决方案

  1. 兼容性问题

    平时,我们对ie6的要求并不是很高,要求ie7、8的样子就够啦。这次,老师特别提出了要求兼容ie6,我开始着重考虑起ie的兼容性问题。

    然后,我又特别查了ie的使用用户,是2014年最新的数据:

    IE6在4月9日停止更新了,与数日前XP退役引起的唏嘘与争论不同,IE6走得很悄然。可是,IE6真的被完全取代了吗,数据表明:

    • 根据NetApplications的数据显示,就在IE6停止更新的4月9日,它在全球的市场占有率是4.4%。对于一款在美国本土的市场占有率只有0.2%的浏览器来说,退休或许是唯一的归宿。但是,令人惊奇的是,IE6在中国的市场占有率竟然是22.2%,这意味着,在其4.4%的全球市场份额中,仅中国大陆就占据了3.4%的份额。

    • 再来看看CNZZ的数据,数据显示在中国4月8日PC端浏览器的使用率中,IE以39.05%遥遥领先,其中IE6贡献了其中的10.19%。

    用一句话来形容ie6:IE6没死,至少在中国,它活得好好的。

    ie6chart

    多年前,有这样一份关于使用浏览器与IQ高低的调查,当年的结论是,IE浏览器用户的IQ全线偏低,2011年IE6用户的平均智商只有83,IE9的用户也不过90而已。Opera以128的平均智商遥遥领先。

    回归正题:我遇见的兼容性问题的解决方法。

    • PNG-24在ie6中的问题

      关于png24、png8和ie6的详细问题,请看链接:关于ie6和png24、png8之间的故事

      因为院网有一堆的半透明图片,用PNG-8会影响它的美观。我采用的方法是:使用DD_belatedPNG。

      需要在html页面里面加这样的标签:

      <!–[if IE 6]>
      <script type="text/javascript"src="js/DD_belatedPNG.js"></script>
      <script>
          DD_belatedPNG.fix('*');
      </script>
      <![endif]–>
      
    • 列表中标题和日期在ie6中错位的问题

      解决方法:

      原来:

      <li><a href=”#”>啦啦啦啦啦~我是一只小麻子</a><span class=”riqi”>2014-05-25</span></li>
      

      改成:

      <li><span class=”riqi”>2014-05-25</span><a href=”#”>啦啦啦啦啦~我是一只小麻子</a></li>
      

      暂时想到这个办法,但是直觉告诉我还会有更加科学的办法~求指点。

    • 兼容ie6带下拉的导航

      嫌以后找着麻烦,以后就用这个啦!

      (已丢失)

    • ie6中的选择器:hover问题

      在ie6中,:hover只支持a链接标签,在li:hover\img:hover.header:hover下的ie6一律没有效果。

      解决方法:使用csshover.htc

      运用方法一:

      <!–[if IE 6]>
      <style type="text/css">
      body { behavior:url("css/csshover3.htc"); }
      </style>
      <![endif]–>
      

      运用方法二:

      body { _behavior: url("css/csshover3.htc"); }

  2. 写法问题

    • 网站优化中<h1>-<h6>的使用

      • <h>标签的主要意义:告诉搜索引擎这个是一段文字的标题,起强调的作用。

      • <h1>-<h6>重要性:递减,由最重要的到相对最不重要的。

      • <h1>不能用的地方:<h1>在一个页面中只能有一个。

      具体可以了解下SEO优化

    • 尽量不要写多余没用的代码,特别是多层

麻凯倩

微信:makaiqian