IE7、IE8、IE9、IE10后各版本的更新内容和各版本的差别

在程序员的眼里,万恶的IE6的结束对他们而言是一种解脱,IE7首次开始完整支持W3C标准,从此之后IE的标准化之路就开始越走越顺,以下总结了IE7以后各版本的更新内容,和各版本的差别,作为Web开发人员解决浏览器兼容性问题的参考。

IE7更新

微软官方更新说明http://www.microsoft.com/china/msdn/library/webservices/WebApp/IE7_RevGd.mspx?mfr=true

IE8更新

  • 解决了所有浮动bug(可能是所有CSS Bug都解决了),完全支持CSS2.1规则和选择器(这个是亮点,至少在CSS上完全符合W3C标准了) 具体见http://msdn.microsoft.com/library/cc304082.aspx
  • 去掉了CSS 表达式 使用 -ms-厂商前缀表示IE专有属性,这一点向webkit和firefox学习了,值得表杨
  • 修正了一系列DOM错误,更符合标准,但并没有新增支持 如getElementById的时候ID区分大小写,不会错把Name当ID,详细列表见 http://msdn.microsoft.com/library/dd433047.aspx
  • 支持link标签的charset属性 AJAX支持增强
  • 支持HTML5中的本地存储(挺先进的
  • 本地JSON对象支持(这个也挺先进)
  • 增加UA兼容模式
  • 增加了almost Stardards渲染模式
  • 然而IE8仍然没有实现DOM L2,DOM L3和DOM L2 和 L3 事件处理(包括冒泡模型)的完整支持

微软官方更新说明
http://msdn.microsoft.com/library/cc288472%28VS.85%29.aspx#html

IE9更新

微软更新说明
http://msdn.microsoft.com/zh-cn/ie/ff468705

IE10更新

  • ECMAScript 5 Strict 模式支持 HTML5和CSS3增强 CSS3 3-D transforms(需要-ms-前缀,因为W3C还未定稿)
  • Websocket,webwork,file api等等
  • SVG改进和增强 SVG滤境
  • DOM增强 大多是带ms前缀的增强(也是就IE专有的)
  • 如触屏操作,手势事件,等等
  • 不再支持IE10的UA兼容设置(因为从IE9开始已经完全符合W3C标准),但仍支持IE9和之前的UA兼容设置

微软更新说明
http://msdn.microsoft.com/en-us/ie/gg192966

概括的说IE7只是对IE6的小小增强,IE8完全支持CSS2.1和选择器,DOM操作更符合W3C标准,但DOM支持仍不完整IE9 完全支持DOM L1,DOM L2,Jscript更符合标准,ECMAScript5支持,HTML5,CSS3支持,SVG支持。

解决Mac OS X上PhpStorm不能输入中文

看到Netbeans上类似问题的解决办法:

/Applications/netbeans/NetBeans 6.7.1/Content/Resource/netbeans/etc/netbeans.conf

netbeans_default_options 里加入

-J-Djava.awt.im.style=on-the-spot

类似,找到PhpStorm的启动文件:/Applications/PhpStorm 2.1.2.app/bin/idea.sh

在 REQUIRED_JVM_ARGS 参数里同样加上 -J-Djava.awt.im.style=on-the-spot

REQUIRED_JVM_ARGS="-J-Djava.awt.im.style=on-the-spot -Xbootclasspath/a:../lib/boot.jar $IDEA_PROPERTIES_PROPERTY $REQUIRED_JVM_ARGS"

可以输入中文了!(via)

PHP导出Excel

方法一:使用制表符、换行符模拟Excel导出

$filename="ExportExcel.xls";//定义一个excel文件

header("Content-Type: application/vnd.ms-execl");
header("Content-Type: application/vnd.ms-excel;charset=UTF-8");
header("Content-Disposition: attachment; filename=$filename");
header("Pragma: no-cache");
header("Expires: 0");

//设置excel输出表头,当然这不是必须的
echo iconv("UTF-8", "gb2312", "ID")."\t";
echo iconv("UTF-8", "gb2312", "Col1")."\t";
echo iconv("UTF-8", "gb2312", "Col2")."\t";
echo iconv("UTF-8", "gb2312", "Col3")."\t";
echo iconv("UTF-8", "gb2312", "Col4")."\n";//注意这个要换行

//连接数据库
mysql_query("SET NAMES utf8");

$result="SELECT * FROM");

while($row =mysql_fetch_array($result)){
	echo iconv("UTF-8", "gb2312", $row[0])."\t";
    echo iconv("UTF-8", "gb2312", $row[1])."\t";
    echo iconv("UTF-8", "gb2312", $row[2])."\t";
    echo iconv("UTF-8", "gb2312", $row[3])."\t";
    echo iconv("UTF-8", "gb2312", $row[4])."\n";
}

这个方法最简单,但是导出的文件并不是真正的Excel,无法设置格式,而且在Mac版的MS Office上无效。

php-excel

简单小巧的Excel类库,可自行修改相关代码设置单元格格式,导出的实际上市XML格式的电子表格,相关属性可参考MSDN文档。小技巧:可以先建一个Excel并将相关格式设置好,另存为XML,用文本编辑器打开XML即可查看相关格式的设置方法,其实和HTML、CSS差不多。

PHPExcel

功能强大、全面,支持office2003、office2007与之相应的是过于臃肿。

个人觉得一般应用的话,第二种方法就足够了,毕竟PHP处理office这些东西并非PHP的长项,在相关软件里点几下鼠标就能调整好的格式,又何必用PHP费大劲设置呢?

用javascript替换URL中的参数

  //分析url
  function parseURL(url) {
      var a = document.createElement('a');
      a.href = url;
      return {
          source: url,
          protocol: a.protocol.replace(':', ''),
          host: a.hostname,
          port: a.port,
          query: a.search,
          params: (function () {
              var ret = {},
              seg = a.search.replace(/^\?/, '').split('&'),
              len = seg.length, i = 0, s;
              for (; i < len; i++) {
                  if (!seg[i]) { continue; }
                  s = seg[i].split('=');
                  ret[s[0]] = s[1];
              }
              return ret;

          })(),
          file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
          hash: a.hash.replace('#', ''),
          path: a.pathname.replace(/^([^\/])/, '/$1'),
          relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
          segments: a.pathname.replace(/^\//, '').split('/')
      };
  }

  //替换myUrl中的同名参数值
  function replaceUrlParams(myUrl, newParams) {
      /*
      for (var x in myUrl.params) {
          for (var y in newParams) {
              if (x.toLowerCase() == y.toLowerCase()) {
                  myUrl.params[x] = newParams[y];
              }
          }
      }
      */

      for (var x in newParams) {
          var hasInMyUrlParams = false;
    for (var y in myUrl.params) {
        if (x.toLowerCase() == y.toLowerCase()) {
            myUrl.params[y] = newParams[x];
            hasInMyUrlParams = true;
            break;
        }
    }
          //原来没有的参数则追加
    if (!hasInMyUrlParams) {
        myUrl.params[x] = newParams[x];
          }
}
      var _result = myUrl.protocol + "://" + myUrl.host + ":" + myUrl.port + myUrl.path + "?";

      for (var p in myUrl.params) {
          _result += (p + "=" + myUrl.params[p] + "&");
      }

      if (_result.substr(_result.length - 1) == "&") {
          _result = _result.substr(0, _result.length - 1);
      }

      if (myUrl.hash != "") {
          _result += "#" + myUrl.hash;
      }
      return _result;
  }

  //辅助输出
  function w(str) {
      document.write(str + "<br>");
  }

  var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
  w("myUrl.file = " + myURL.file)     // = 'index.html'
  w("myUrl.hash = " + myURL.hash)     // = 'top'
  w("myUrl.host = " + myURL.host)     // = 'abc.com'
  w("myUrl.query = " + myURL.query)    // = '?id=255&m=hello'
  w("myUrl.params = " + myURL.params)   // = Object = { id: 255, m: hello }
  w("myUrl.path = " + myURL.path)     // = '/dir/index.html'
  w("myUrl.segments = " + myURL.segments) // = Array = ['dir', 'index.html']
  w("myUrl.port = " + myURL.port)     // = '8080'
  w("myUrl.protocol = " + myURL.protocol) // = 'http'
  w("myUrl.source = " + myURL.source)   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

  var _newUrl = replaceUrlParams(myURL, { id: 101, m: "World", page: 1,"page":2 });

  w("<br>新url为:")
  w(_newUrl); //http://abc.com:8080/dir/index.html?id=101&m=World&page=2#top   

via 用javascript替换URL中的参数值

雅虎发布WebPlayer 可简便嵌入媒体到网页

雅虎面向网站开发者提供了一个beta版本的WebPlayer应用,它是一个可以内嵌在网页中的媒体播放器,支持各种视频和音频格式,只需要提供媒体文件地址就可以轻松地像YouTube的嵌入代码一样形成一个网页中的播放器,包含播放列表和控制功能。

访问:WebPlayer

PHP获取文件扩展名的方法

推荐的方法:

echo pathinfo('/www/htdocs/your_image.jpg', PATHINFO_EXTENSION);

pathinfo详解:

<?php
$file_path = pathinfo('/www/htdocs/your_image.jpg');
echo "$file_path ['dirname']\n";
echo "$file_path ['basename']\n";
echo "$file_path ['extension']\n";
echo "$file_path ['filename']\n"; // only in PHP 5.2+
?>

以上将输出

  • /www/htdocs
  • your_image.jpg
  • jpg
  • your_image

注意: pathinfo 支持第3个参数

  • PATHINFO_DIRNAME – 目录
  • PATHINFO_BASENAME – 文件名(含扩展名)
  • PATHINFO_EXTENSION – 扩展名
  • PATHINFO_FILENAME – 文件名(不含扩展名)

其它不推荐的写法:

你可能会这样写

function get_file_extension($file_name) {
    return substr(strrchr($file_name,'.'),1);
}

或这样写

function file_extension($filename) {
    return end(explode(".", $filename));
}

之所以不推荐以上两种方法,主要基于效率考虑。

来源:PHP获取文件扩展名的正确方法

IE10采用新的HTML5解析规则

如果开发人员在不同的浏览器中使用相同的标记和代码可以得到相同的效果,这会让Web开发变得更简单有效。IE10在这方面的取得进展,完全支持 HTML5的标准化解析规则。HTML 5的重要变化之一便是引入了针对非标准HTML特别是错误格式HTML的标准化解析规则。浏览器在遇到存在错误的HTML如缺少结束标记时通常表现得很宽 松。这种大度被广受赞誉,因为相比对手XHTML来说,HTML​在此种情况下会继续正常处理。 HTML最新待定标准提到:​

本规范定了HTML文档的解析规则,无论它们语法是否错误。解析算法中的某些地方被视为解析错误。针对解析错误的处理明确定义:用户代理(浏览器)在遇到这些问题时要么按照如下描述处理,要么必须在遇到第一个不想遵循如下处理规则的错误时终止处理。

下面的示例说明某些情况下的改进:

互操作的innerHTML

这些改进也适用于innerHTML。代码模式就像现在这些工作,你会期待IE10

var select = document.createElement("select");

select.innerHTML = “<option>one</option><option>two</option>”;

var table = document.createElement(”table”);

table.innerHTML = “<tr><td>one</td><td>two</td></tr>”;

更好的错误报告

HTML5确保标记将始终解析。它还是一个帮助开发人员一开始便避免无效标记的方法。编写有效的标记可以使您的网站按照期望的方式工作,并更好的与旧版浏览器兼容。

为了在这方面帮助开发人员,IE10现在可以通过F12开发人员工具报告HTML解析错误。

删除旧特性

因为某些在早期IE浏览器版本中的特性已不符合HTML5解析,我们已经将他们从IE10模式中删除。这些过时的特性在传统模式下仍然有效。

1、条件注释

<!–[if IE]>
在IE10和其他的浏览器中,此内容被忽略。
在旧版本的IE浏览器中,它呈现为页面的一部分。
<![endif]–>

这意味着仍然可以使用条件注释,但将只针对旧版本的IE浏览器 。如果你需要区分较新的浏览器,请使用功能检测

2、元素行为

<html xmlns:my>
<?import namespace=”my” implementation=”my.htc”>
<my:element>
在IE10和其他的浏览器中,这解析为未知的元素
在旧版本的IE浏览器中,它绑定到 “my.htc”
</my:element>
</html>

3、XML Data Islands

<xml>
在IE10和其他的浏览器中,这解析为<b>HTML</b>
在旧版本的IE浏览器中,它解析为XML
</xml>

利用IE9 Site Pinning增加网站访问量

IE9综合利用了Site Pinning(固定网站),允许网站的开发者获得一个专门的用户接口来增加站点的访问量。微软公司高管Ziad Ismail透露, IE9的Site Pinning不仅保证用户能通过Windows 7进行访问,因为Site PinningI与Windows 7进行了精密的整合,而且能将可测量的结果反馈给相关的访问接口。

现在微软发布了网站www.buildmypinnedsite.com,网站开发者利用Site Pinning就更容易了。

Build My Pinned SiteBuildMyPinnedSite网站上有列出为允许用户能固定其网址开发者需要做的几步,从设计高清晰的网站头像,隐藏跳跃列表(Jumplist)的附属部分,到设立通知栏及用预览的缩略图片进行控制。

“BuildMyPinnedSite 仅是一个工具,它能让网站的用户和开发者体验到采用带有固定功能的网站是多么的好。关键词的导向能够让突发性新闻 引起你的注意,媒体播放也可以在浏览器之外进行控制。” Ismail表示,“当你赢得了一个竞价投标时通知就会告诉你,Games能记录你离线时的统计 数据并且显示出你错过了哪些内容,像Hotmail等网页应用程序则像一款本地邮件客户端。开发你网站的想法和编码在BuildMyPinnedSite 里都有”。

虽然网站开发者仅能以IE9和Windows 7运行微软已经编译好的代码,但这对用户使用任一浏览器是没有影响的。

Google奉上首个CSS动画涂鸦

Google今天的涂鸦十分特别,这个动画图片并非传统的GIF图像,而是使用CSS Sprites技术,利用一个初始图片和一张画满各个动作的拼接图片,从而实现了动画效果。

Google奉上首个CSS动画涂鸦初始图片

Google Doogle: Martha Graham

Google Doogle CSS Sprites

Google今日涂鸦是为了纪念现代舞先驱玛莎·葛兰姆(Martha Graham,1894年5月11日-1991年4月1日)117周年诞辰,他是美国舞蹈家和编舞家,也是现代舞蹈史的创始人之一。其作品多以美国人文或 是希腊古典神话为主题,代表作有《原始的神秘》(Primitive Mysteries,1936年)、《给世界的信》(Letter to the World,1940年)、《阿帕拉契山脈之春》 (Appalachian Spring,1944年)、《夜旅》(Night Journey,1947年)。

Google奉上首个CSS动画涂鸦