HTML 5兼容IE的写法

最新推荐文章于 2021-07-17 15:12:06 发布
转载 最新推荐文章于 2021-07-17 15:12:06 发布 · 754 阅读 · 0
文章标签：

#ie #html #微软

本文详细解读了如何通过X-UA-Compatible元标签实现IE8的兼容性优化，包括其可用方法和Emulate模式对DOCTYPE的影响，以及推荐的首选方法。

来作为IE8的兼容方法，虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。谁让IE6那么多呢，或许2014年以后我们可以有更多的时间去关心IE8，而不是IE6或者IE7。

 
  1. <!DOCTYPE html> 
  2. <!–[if IE]> 
  3. <meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> 
  4. <![endif]–> 
  5. <!–[if IE 7]> 
  6. <meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 
  7. <![endif]–> 
  8. <!–[if IE 6]> 
  9. <meta http-equiv=”X-UA-Compatible” content=”IE=6″ /> 
  10. <![endif]–> 

关于X-UA-Compatible

目前绝大多数网站都用

 
  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > 

来作为IE8的兼容方法，虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。

谁让IE6那么多呢，或许2014年以后我们可以有更多的时间去关心IE8，而不是IE6或者IE7。

在X-UA-Compatible中可用的方法有：

 
  1. <meta http-equiv="X-UA-Compatible" content="IE=5" > 
  2. <meta http-equiv="X-UA-Compatible" content="IE=7" > 
  3. <meta http-equiv="X-UA-Compatible" content="IE=8" > 
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge" > 

其中最后一行是永远以最新的IE版本模式来显示网页的。

另外加上

 
  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > 
  2. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > 

而使用，Emulate模式后则更重视<!DOCTYPE>

所以目前来说还是以

  
  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > 

为首选。

微软自己创下的罪孽让他自己去扫吧。

原文链接：http://developer.51cto.com/art/201205/334524.htm

HTML5 兼容IE浏览器
04-23
NULL 博文链接：https://onestopweb.iteye.com/blog/2259501
HTML5 声明兼容IE的写法
09-28
总结来说，为了兼容IE浏览器，尤其是IE8及以下版本，开发者可以在HTML文档中使用特定的<!DOCTYPE>声明和标签，来指定页面在IE浏览器中的渲染模式。这样可以有效避免因浏览器不兼容而造成页面显示异常的问题，并确保...
html5兼容IE
bingcool
11-07 664
是HTML5的声明，主流的游览器中只有IE8及以下版本不支持，这样IE会进入Quirks模式。但之后的声明可以强制指定IE的呈现模式，所以<!DOCTYPE html>声明对IE就无影响。 HTML5并没有XHTML那么严格，对于一般的xhtml页面，基本都不通完全通过W3C验证标准，而改为HTML5声明后基本都能过 01 <!DOCTYPE html>
html5兼容ie
weixin_30868855的博客
05-31 234
https://www.jb51.net/html5/143049.html 转载于:https://www.cnblogs.com/rivsidn/p/10913532.html
HTML5兼容IE方法
dkmings的博客
06-21 872
越来越多的站点开始使用 HTML5 标签，但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问，解决方案有下面两个： 1.为网站创建多套模板，通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面，例如：优酷网。 2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。 针对IE比较好的解决方案是html5
IE6中的position:fixed定位兼容性写法分享
12-07
接下来是针对不同方向固定的兼容性写法： 1. **头部固定**： ```css /* IE6 头部固定 */ html .fixed-top { position: absolute; bottom: auto; top: expression(eval(document.documentElement.scrollTop)); } ...
让IE9以下版本的浏览器兼容HTML5的方法
09-28
为了让IE9及以下版本的浏览器兼容HTML5的新特性，我们需要采取一些技术手段，因为这些旧版的Internet Explorer浏览器原生不支持HTML5的一些新元素和功能。本文将详细介绍一种常用的方法，即通过JavaScript来模拟创建...
html兼容ie写法,如何解决IE、FF等主流浏览器JS兼容写法
weixin_32048757的博客
06-03 368
/*以下以 IE 代替 Internet Explorer，以 MF/FF 代替 Mozzila Firefox*///window.eventIE：有window.event对象FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)解决方法：varevent=event ||window.event;exam...
html 浏览器兼容ie前缀,前端css\js浏览器兼容性问题及处理方案
weixin_34336527的博客
06-09 491
常见的浏览器内核主要有四种：Webkit内核、Presto内核、Trident内核、Gecko内核。HTML兼容CSS兼容JavaScript兼容1. HTML兼容对于HTML兼容，这是由于低版本浏览器不能识别一些高版本浏览器使用的标签，从而导致不能解析，比如Html5 新语义标签 如header, section, footer, aside, nav, main, article, figur...
html5 IE678兼容
12-08
html5shiv.min.js PIE_IE678.js respond1-4-2.js <!--引入脚本解决兼容性(hack技术，必须放入head中)--> <!--[if lt IE 9]> [removed][removed] [removed][removed] [removed][removed] <![endif]-->
HTML和CSS的IE兼容问题
qq_46492364的博客
04-01 420
文章目录前言一、html兼容二、css兼容总结 前言 下一部分就开始学习移动端网页制作了，今天来记录一下浏览器兼容问题 一、html兼容 书写条件注释可以解决低版本的IE浏览器兼容问题。条件注释的写法如下： 代码如下（示例）： <!--[if lte IE 9]> <h2>小于等于IE9的浏览器可以看到</h2> <![endif]--> 比较符号： 二、css兼容 css hack 代码如下（示例）： _background-color: pi.
html中添加ie兼容性视图,css FF与IE兼容性总结
weixin_29420299的博客
07-17 414
css FF与IE兼容性总结发布时间：2009-09-03 18:29:40 作者：佚名 我要评论css FF与IE兼容性总结 ,在实际应用中大家可以多测试。1. 超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-ACode:2. FireFox下如何使连续长...
html5兼容问题,【HTML5分享】关于浏览器的兼容问题
weixin_42202078的博客
06-22 306
该楼层疑似违规已被系统折叠隐藏此楼查看此楼常见浏览器兼容问题：1.li在IE中底部3像素的BUG。解决方案：在上加float:left；即可解决2. IE6中奇数宽高的BUG。解决方案：就是将外部相对定位的div宽度改成偶数。高度也是一样的。3. IE6文字溢出BUG。引发这种BUG有以下几个条件：1)是注释引起的,删除所有注释即可。2)hidden的input直接放在form下。3)displ...
html5.js 让所有IE支持HTML5
weixin_33738555的博客
05-06 127
摘自： http://hi.baidu.com/skway/item/33f38a9487356b4ff14215cf?qq-pf-to=pcqq.c2c   html5.js 让所有IE支持HTML5 自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如 article)的途径是使用HTML5 shiv,感谢remy sharp为我...
html5.js让IE（包括IE6）支持HTML5…
Drupal学习笔记
06-04 572
html5.js让IE（包括IE6）支持HTML5元素方法 微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的，我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE（包括IE6）支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement_x_x声明，利用条件注释针对IE来调
html5ie兼容问题
霖霂晗的专栏
03-23 611
Styling the article element document.createElement("myHero") myHero { display:block; background-color:#ddd; padding: 50px; font-size: 30px; }
html里语言兼容,使用html5兼容低版本浏览器详解
weixin_39843698的博客
06-03 373
因为html5 新出的一些语义化的标签，在低版本浏览器下不能识别，举个例子，比如你写了一个 header 标签中，写了一段文本，在低版本浏览器下，肯定是能看到的，但是，那是他是不认识 header标签的，只是展示的内容而已，如果你给header添加一个样式，肯定是不可以的，我们要解决的就是让低版本的浏览器认识并解析我们的html5标签。别人的解决方法，我copy过来了，是自己经过测试的。第一种方法...
html5.js让IE（包含IE6）支持HTML5元素方法
weixin_30375247的博客
04-12 210
原文地址：http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE（包含IE6）支持HTML5元素方法 微软的最新浏览器IE8及下面IE版本号对HTML5标签的支持是有限的，我们能够通过在网页中加入脚本的方式来...
position sticky 兼容写法ie
最新发布
01-10
### 解决 `position: sticky` 在 Internet Explorer 中的兼容性 Internet Explorer 并不支持 CSS 的 `position: sticky` 属性。为了实现类似的效果，可以采用 JavaScript 或 jQuery 插件作为 polyfill 来模拟该行为。 一种常见的做法是监听滚动事件并动态调整元素的位置属性： ```javascript (function($) { $.fn.sticky = function(options) { var settings = $.extend({ topSpacing: 0, bottomSpacing: 0 }, options); return this.each(function() { var $this = $(this); var originalTop = $this.offset().top; $(window).on('scroll', function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= originalTop - settings.topSpacing) { $this.css({ position: 'fixed', top: settings.topSpacing + 'px' }); } else { $this.css({ position: '', top: '' }); } }); // Handle resize events to recalculate the offset. $(window).resize(function(){ originalTop = $this.offset().top; }); }); }; })(jQuery); // 使用插件 $('.sticky-element').sticky({ topSpacing: 20 }); ``` 另一种方式是在 HTML 结构上做文章，在 IE 下通过特定类名应用不同的样式规则来达到近似效果。例如： ```html <div class="container"> <header> <!-- 这里放置需要固定定位的内容 --> </header> </div> <style> .container header { /* 默认情况下使用标准 Sticky */ position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0; } /* 针对 IE 特定版本添加额外处理 */ @media all and (-ms-high-contrast:none),(-ms-high-contrast:active){ .ie-specific-class{ position:relative !important; z-index:1000; } body.ie .container header { position: fixed; width: 100%; margin-top: 0; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <!-- 添加条件注释用于加载针对旧版浏览器的脚本文件 --> <!--[if lt IE 9]> <script type="text/javascript" src="/path/to/polyfills-for-ie.js"></script> <![endif]--> ``` 对于更复杂的场景，还可以考虑第三方库如 [Stickybits](https://github.com/dollarshaveclub/stickybits)，它提供了更好的跨平台支持和性能优化[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值