一行代码解决ie浏览器的兼容

于 2021-12-28 15:21:30 发布
阅读量976 收藏 6
点赞数 1
文章标签： html elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ftally/article/details/122194253
版权 
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。
1、使用一行代码来指定浏览器使用特定的文档模式。
<meta http-equiv="x-ua-compatible" content="IE=9" >
<meta http-equiv="x-ua-compatible" content="IE=8" >
<meta http-equiv="x-ua-compatible" content="IE=7" >
2、在一些情况下，我们需要限定浏览器对文档的解析到某一特定版本，或者将浏览器限定到一些旧版本的表现中。可以用如下的方式：
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
 
使用这种写法，浏览器或者使用标准模式进行解析，或者使用 IE5 Quirks 模式进行解析。
3、为了测试，我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。
<meta http-equiv="x-ua-compatible" content="IE=edge" >
4、多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >


一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案
百度也应用了这种方案去解决IE的兼容问题
百度源代码如下
<!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″ />



另外还有一起其他的解决方案
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" />
这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。


-moz-对应 Firefox, 
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer
现在写一段 CSS 3 代码需要同时写上不同的浏览器私有前缀，例如：
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
-o-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
box-shadow: 0 2px 3px rgba(0, 0, 0, .1);


前端开发人员必须熟悉的10个CSS3属性（需要添加前缀的CSS3）
1.	Border-radius
2.	Box-shadow
3.	Text-shadow
4.	Text-stroks
5.	Multiple backgrounds
6.	Background-size
7.	Text-overflow
8.	Flexible box model
9.	Resize
10.	transition



手机边框：

Retina屏幕，设备像素比，移动端的边框在这些屏幕上1px  会表现处2px,3px像素的宽度，所以出现各种解决方案，今天只总结一种，以后慢慢补充。。通过伪类 ::after。，原理就是通过transfrom:scaleX scale scaleY这几个函数进行缩放，废话不多说，直接撸代码，分别是：底边，上边，左边，右边，还有四个边框都有，在文章末尾有相关知识的介绍链接，本文就不会浪费文字在这些方面了。
/*手机端实现真正的一像素边框*/
.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
   position: relative;
 }
/*线条颜色 黑色*/
.border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
     background-color: #000; 
}
 /*底边边框一像素*/
.border-bottom-1px::after {
     content:"";
     position: absolute; 
     left: 0;
     bottom: 0;
     width: 100%;
     height: 1px;
     transform-origin: 0 0;
 }

 /*上边边框一像素*/
.border-top-1px::after {
   content:"";
    position: absolute; 
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
}

 /*左边边框一像素*/
.border-left-1px::after {
  content:"";
  position: absolute; 
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  transform-origin: 0 0;
 }
/*右边边框1像素*/
.border-right-1px::after {
          content: "";
          box-sizing: border-box;
          position: absolute; 
          right: 0;
          top: 0;
          width: 1px;
          height: 100%;
          transform-origin: 0 0;
 }
/*边框一像素*/
.border-1px::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid red;
}

/*设备像素比*/
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.5);
    }  
   .border-left-1px::after, .border-right-1px::after {
       transform: scaleX(0.5);
    } 
   .border-1px::after {
          width: 200%;
          height: 200%;
          transform: scale(0.5);
            transform-origin: 0 0;
     }
}

/*设备像素比*/
@media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
   .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.333);
   } 
   .border-left-1px::after, .border-right-1px::after {
     transform: scaleX(0.333);
   } 
  .border-1px::after {
      width: 300%;
      height: 300%;
      transform: scale(0.333);
      transform-origin: 0 0;
  }
}
/*去掉滚动条*/
/*webkit内核*/
.scroll_content::-webkit-scrollbar {
    width:0px;
    height:0px;
}
.scroll_content::-webkit-scrollbar-button    {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track     {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-resizer  {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar {
    width:10px;
    height:10px;
}
/*o内核*/
.scroll_content .-o-scrollbar{
    -moz-appearance: none !important;   
    background: rgba(0,255,0,0) !important;  
}
.scroll_content::-o-scrollbar-button    {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track     {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-resizer  {
    background-color:rgba(0,0,0,0);
}
/*IE10,IE11,IE12*/
.scroll_content{
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow: auto;
}

Ftally
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IE浏览器兼容性
谢君
01-11 195
css hack写法 写法 兼容浏览器 *property IE5、IE7 _property IE5 value\9 IE5、IE7、IE8、IE9、IE10 value\0 IE8、IE9、IE10、IE11 value\9\0 IE5、IE8、IE9、IE10 根据浏览器的表格 浏览器 *property _property value\9 val...
关于ie浏览器兼容性处理
chenzlyan的博客
06-04 436
浏览器兼容所遇到的问题总结 1、CSS文件限制 Internet Explorer（简称IE）强加了一些可能直接影响页面呈现的CSS文件限制。以下是IE 9及更早版本中已知的CSS文件限制列表。 - 每页最多31个CSS文件或 2、bootstrap不支持IE兼容模式。 设置强制浏览器按照最新的标准去渲染，防止ie8下显示混乱 &lt;meta charset="utf-8"&gt...
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
09-24
在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题
IE 浏览器兼容 代码
花生壳的专栏
08-30 1468
<br />要为你的网页指定文件模式，需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。<br /><br /><html><br /><head><br />  <!-- Mimic Internet Explorer 7 --><br />  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><br />  <title>My
一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
路在脚下
06-16 3865
在这里送上几种IE使用模式： 1.强制使用IE5模式来解析 1 2.强制使用IE6模式来解析 1 3.强制使用IE7模式来解析的两种方式 1 2 4. 强制使用IE8模式来解析 1 5. Google Chrome Frame也可以让IE用上Chrome的引擎: 1 6.如果一个特定版本的IE支持所要求的兼容性模式多于一种，如下代码就是I
【总结】各大常用浏览器兼容性代码
weixin_34220963的博客
07-09 164
各个浏览器的内核不同，导致相同的代码，浏览器显示出来的效果不同 【 -moz】 /*Firefox4*/-moz-transition:width2s;-moz-transition-timing-function:linear; 【-webki】/*SafariandChrome*/-webkit-transition:width2s;-webkit-...
一行代码解决各种IE兼容问题（IE6-IE10）
09-28
这样可以确保所有支持`x-ua-compatible`的IE浏览器都会尽可能使用它们的最佳兼容性。 4. **指定多个版本** 有时，可能需要指定多个版本，浏览器会选择其中它支持的最高版本。例如： ```html ...
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
12-09
在本文中，我们将探讨在使用Bootstrap Table组件实现冻结列功能时遇到的IE浏览器兼容性问题，并提供一种解决方案。 Bootstrap Table 是一个流行的JavaScript组件，用于创建美观、响应式的表格。然而，在某些IE浏览...
各浏览器兼容代码
chijizhun7209的博客
02-27 602
各种浏览器兼容篡位的css样式写法；/针对谷歌浏览器内核支持的CSS样式/；@mediascreenand(-webkit-；样式；/针对IE6特制识别的CSS样式/；*HTML.SearchBox；样式；针对Firefox浏览器的内核CSS写法：；@-moz-documenturl-pref...
浏览器兼容代码
09-23
浏览器兼容代码，各种浏览器兼容问题，如果各个浏览器的高度都不相同，代码如下： .warp{ Height:100px; /*IE6、IE7、IE8、FF识别*/ Height:110px\9; /*IE8识别*/
浏览器兼容代码大全
10-27
帮助新人指导的代码兼容大全，全新的兼容方法，很适合大众！
WEB程序兼容IE代码
10-18
在代码中写Ｂ／Ｓ程序如何兼容IE
常见浏览器兼容代码
04-02
本篇主要为大家提供常见的Dom运用在各大主流浏览器（IE、Opera、Google Chrome、Safari、Firefox）中的兼容代码
IE7兼容代码
牛儿吃草的博客
12-04 1036
将此代码加入head中
CSS兼容性解决方案
Jason
04-29 1365
网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容
CSS FF与IE浏览器兼容性解决方案总结
CSS FF与IE兼容性总结 CSS FF与IE兼容性总结是指在实际应用中遇到的CSS样式在FireFox（FF）和Internet ...了解FF和IE浏览器之间的兼容性问题非常重要，了解这些问题可以帮助我们更好地编写跨浏览器兼容的CSS代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值