让ie8,7,6更好的支持css3,媒体查询和html5 Wordpress

难道我们还在乎ie8,7,6?我个人觉得越来越要忽略了。但ie8还是有一些人支持在使用的。

有三个脚本可以帮助你支持他们,他们补充了现代的一些东西,例如响应式设计,css3伪类和属性选择器以及html5的标签。为这些提供了更好的兼容性。

在浏览器小于IE9的情况下,我们可以在我们的主题加载下面这些js.

  • html5shiv.js (source) – HTML5 支持
  • selectivizr.js (source) – css伪类支持 (eg :last-child)
  • respond.js (source) – 媒体查询支持

那我们应该如何加载这些js呢?我们需要加载这个respond.js在主题的底部,而htmlshiv.js和selectivizr.js则在主题的顶部。下面的代码可以直接加载function.php里面。

/*  IE js header
/* ------------------------------------ */
function alx_ie_js_header () {
echo '<!--[if lt IE 9]>'. "n";
echo '<script src="' . esc_url( get_template_directory_uri() . '/js/ie/html5shiv.js' ) . '"></script>'. "n";
echo '<script src="' . esc_url( get_template_directory_uri() . '/js/ie/selectivizr.js' ) . '"></script>'. "n";
echo '<![endif]-->'. "n";
}
add_action( 'wp_head', 'alx_ie_js_header' );

/*  IE js footer
/* ------------------------------------ */
function alx_ie_js_footer () {
echo '<!--[if lt IE 9]>'. "n";
echo '<script src="' . esc_url( get_template_directory_uri() . '/js/ie/respond.js' ) . '"></script>'. "n";
echo '<![endif]-->'. "n";
}
add_action( 'wp_footer', 'alx_ie_js_footer', 20 );

 

posted @ 2014-11-05 16:22  艺术代码  阅读(354)  评论(0编辑  收藏  举报