让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 );