ie11兼容jQuery吗 ie8不兼容jquery_html

最好引用1.4.2版本

 

 

这里采用第一种，并且使用一种完美兼容性解决办法，在head头部加入

 

<metahttp-equiv="X-UA-Compatible"content="IE=9;IE=8;IE=7;IE=EDGE">即可！

 

 

 

案例1

IE8某些情况下不支持jQuery的attr方法的解决办法

今天写程序的时候，用到了 jQuery 中的attr 方法来设置 embed 标签的 src 属性，大体代码如下：

  1. var=***;//获取视频路径
  2. $("#big embed").attr('src',);

Chrmoe、firefox等都运行正常，但是测试到 IE8 的时候，令人蛋疼的事出现了，视频的路径竟然没有修改成功！调试发现，视频的路径的获取成功了，但是在用 attr 方法赋值时却没有成功。

查看了一些资料，发现也有其他朋友遇到过相似的问题。

 

后来找到一种肯定可行的解决方法：通过 html() 方法来重写 embed 标签。

html代码

  1. <divid="big"></div>

 jQuery代码

  1. var=***;//获取图片路径
  2. $("#big").html('<embed src="'++'" />');//其他属性忽略没写，自行添加

大致方法如上， 实际情况可更加自己的程序做些修改。

 

案例二：

JQuery.validate在ie8下不支持的快速解决方法

一、在ie8下回有问题的代码

1、JQuery.validate验证框架是通过页面form表单提交验证<input/>标签中输入是否符合自己的规则的

 

 

<form id="cardTypeFrm">
  <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh">
    <tbody>           
      <tr>
        <th class="f14 tr pc1">用户名：</th>
        <td>
          <input type="text" class="pzh_input1" id="userName" name="userName" />
        </td>
      </tr>
      <tr>
        <th class="f14 tr pc1">密码：</th>
        <td>
          <input type="text" class="pzh_input1" id="passWord" name="passWord" />
        </td>
      </tr>
    </tbody>
  </table>
  <p class="pc2 undis pl50 error pa" style="padding-left:118px;margin-top:-10px;" id="card_next_error">错误信息</p>
  <div class="m20 tc">
    <input type="submit" id="submitCardNo" class="define_button reservation_1" value="登陆" />
    <input type="button" value="取消" class="close_button closePzh ml10" />
  </div>
</form>

其中 name属性和下面js中的rules中的属性一致

2、js绑定validate事件代码如下

$(function() {
      initCardTypeFrmValidate()
      })
 
function initCardTypeFrmValidate() {
 
  $('#cardTypeFrm').validate({
    onkeyup : false,
    onfocusout : false,
    rules : {
      userName : {required : true}
      passWord : {required : true}
    },
 
    messages : {
      userName : {required : '请输入用户名'}，
      passWord : {required : '请输入密码'}
    },
    errorElement : "p"
  });
}

onkeyup : false,表示键盘输入不验证，默认true
onfocusout : false,表示输入框失去焦点不验证，默认true

二、解决方案是，禁止页面的表单提交，实行js中绑定表单提交表单

1、html代码不变

<form id="cardTypeFrm">
  <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh">
    <tbody>           
      <tr>
        <th class="f14 tr pc1">用户名：</th>
        <td>
          <input type="text" class="pzh_input1" id="userName" name="userName" />
        </td>
      </tr>
      <tr>
        <th class="f14 tr pc1">密码：</th>
        <td>
          <input type="text" class="pzh_input1" id="passWord" name="passWord" />
        </td>
      </tr>
    </tbody>
  </table>
  <p class="pc2 undis pl50 error pa" style="padding-left:118px;margin-top:-10px;" id="card_next_error">错误信息</p>
  <div class="m20 tc">
    <input type="submit" id="submitCardNo" class="define_button reservation_1" value="登陆" />
    <input type="button" value="取消" class="close_button closePzh ml10" />
  </div>
</form>

2、js代码中加入绑定提交事件

$(function() {
      initCardTypeFrmValidate()
      //优化代码
      $('#cardTypeFrm').submit(function() {
 
        if ($('#cardTypeFrm').valid()) {
          //通过执行的动作
        }
        return false;//永远禁止页面表单提交
      })
  })
 
function initCardTypeFrmValidate() {
 
  $('#cardTypeFrm').validate({
    onkeyup : false,
    onfocusout : false,
    rules : {
      userName : {required : true}
      passWord : {required : true}
    },
 
    messages : {
      userName : {required : '请输入用户名'}，
      passWord : {required : '请输入密码'}
    },
    errorElement : "p"
  });
}

 

 

 

案例三：解决IE8-浏览器不支持CSS3 media queries的办法

 

在项目的CSS文件中采用了media这东东来根据视窗的大小自动调整布局，但是，但是IE8及以下版本浏览器不支持CSS3 media queries，也就是@media screen and (max-width: 900px) 里面的css代码没有执行，

@media screen and (max-width: 900px) {
  ...
}

这如何是好啊，网上倒是有不少人提出解决方法，最简单的方法就是：

IE8和之前的浏览器不支持CSS3 media queries，你可以在页面中添加css3-mediaqueries.js来解决这个问题。

 

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


原来如此，还挺简单嘛，结果大失所望啊，项目中怎么试怎么就不行呢，还望试过可行的同 仁点拨点拨啊，没办法只能采用另一种稍微复杂些的方法，也是从网上学来，这里要考虑两个问题，一是只有IE8及其低版本才做此处理，二是只有浏览器缩小到 某一个大小范围后才做此处理。方法如下：

原理：采用jquery，其实不懂，会用就行，然后在html中根据需要来改变对应的CSS文件

解决方法：

在所以页面的共用js文件后面添加如下代码：

function processLowerIENavigate()
{
   var isIE = document.all ? 1 : 0;
   if (isIE == 1)
   {
   if(navigator.userAgent.indexOf("MSIE7.0") > 0 || navigator.userAgent.indexOf("MSIE 8.0") > 0)
   {  
  //  var doc=document; 
   var link=document_createElement_x_x_x("link");
   link.setAttribute("rel", "stylesheet");
   link.setAttribute("type", "text/css");
   link.setAttribute("id", "size-stylesheet");
   link.setAttribute("href", "");
  
   var heads = document.getElementsByTagName_r("head");
   if(heads.length)
   heads[0].a(link);
   else
   document.documentElement.a(link);

   document.write("
   document.write("
  
   }
   } 
}
var lowerIE8 = processLowerIENavigate();media_screen.js文件内容如下，直接从网上copy：
function adjustStyle(width) {
  width = parseInt(width);
  if (width < 902) {
//alert("<900");
//alert(width);
  $("#size-stylesheet").attr("href", "navigateLowerIE8.css");
  } else {
  // alert(">900");
  //alert(width);
   $("#size-stylesheet").attr("href", ""); 
  }
}

$(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
  adjustStyle($(this).width());
  });
});


navigateLowerIE8.css文件就是IE8其低版本浏览器在缩小时的页面布局了。OK，一切都确实搞定。

 

 

 

案例四：一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

百度源代码如下

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>;
<head>
<meta http-equiv=Content-Type content=“text/html;charset=utf-8″>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<title>百度一下，你就知道 </title>
<script>var wpo={start:new Date*1,pid:109,page:‘superpage’}</script>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打开百度，右键查看源码看下！我们可以看下文件头是否存在这样一行代码！

这句话的意思是强制使用IE7模式来解析网页代码！

在这里送上几种IE使用模式！

<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
2. Google Chrome Frame也可以让IE用上Chrome的引擎:

<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />
3.强制IE8使用IE7模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –>
//或者
<meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>
4.强制IE8使用IE6或IE5模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –>

<meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode –>
5.如果一个特定版本的IE支持所要求的兼容性模式多于一种，如：

<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />
二.设定网站服务器以指定预设兼容性模式

如果服务器是自己的话，可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。

录入，下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

另外还有一起其他的解决方案，例如google的

ie7 – js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使 得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式（推荐）

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>
解决PNG显示问题

只需将透明png图片命名为*-trans.png

需要注意的是：此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。
三、<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
创建html5时发现这么一句话，不知其什么意思，百度如下：
这 样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。