WordPress 4.7.5改善Twenty Fifteen主题在Internet Explorer 11上的兼容显示问题

WordPress 4.7.5使用Twenty Fifteen主题的时候,在Internet Explorer 11上存在兼容问题,页面的左边的侧边栏经常会不绘制,出现空白,这个问题是由于Internet Explorer 11使用的Trident引擎导致的,我们可以通过强制Internet Explorer 11使用Internet Explorer 9引擎来改善问题,注意: 是改善,暂时还没办法彻底解决


WordPress 4.7.5使用的主题,或者子主题的functions.php文件的最下面增加如下代码:

<?php
	/*
	 * IE 11上解决显示兼容问题,目前测试来看,在Windows 7上面,可以比较好的改善,但是无法根除
	 * 尤其是页面后退的时候,偶尔还是会出现左边的侧边栏没有绘制导致一片白色的情况
	 */
	function compact_ie_11() {
		$agent=$_SERVER["HTTP_USER_AGENT"]; 
		if(stripos($agent,'trident') && stripos($agent,'rv:11')){
			echo '<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"/>' . "\n";
		}
		echo '<!-- 解决从Edge中选择 使用Internet Explorer打开的时候,此时并未从服务器请求数据,而是使用Edge缓存的数据,这样导致没有设置兼容模式,另外 WP SupCache也可能返回Chrome或者FireFox刚刚请求过的页面,而Internet Explorer 11本身又存在没有正确处理X-UA-Compatible的情况,Internet Explorer 11 自身可能会由于某些原因忽略设置,此时需要强制设置一下来强行修正渲染 -->
			<script type="text/javascript">
				try{
				    if(navigator){
				      var ua = navigator.userAgent;
				      if ( ua && (ua.indexOf("Trident") != -1) && (ua.indexOf("rv:11") != -1) ){
				        var meta = document.createElement("meta");
				        meta.setAttribute("http-equiv", "X-UA-Compatible");
				        meta.setAttribute("content", "IE=9,chrome=1");
				        var head = parent.document.getElementsByTagName("head");
				        if(head){
				          head[0].appendChild(meta);
				        }
				      }
				    }
				}catch(e){
					
				}
			</script>' . "\n";
	}
	/*	
	*我们把优先级设置为0 ,这个判断应该尽可能的添加<header>到最前面	
	*/
	add_action('wp_head', 'compact_ie_11', 0);
?>

修改完成后,如果服务器使用php-fpm处理的PHP代码,则最好重启php-fpm,否则由于代码缓存问题,可能要比较长时间才能生效。
如果使用了WP SuperCache的话,需要删除一次缓存,否则短时间内代码无法生效。

发布者

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注