这是一个口才很好的例子子！ Http-equiv“ x-ua-compatible“ ie edge” \

你的位置：网站首页 >> 频道首页 >>微软（microsoft） >>这是一个口才很好的例子子！ Http-equiv“ x-ua-compatible“ ie edge” \

这是一个口才很好的例子子！ Http-equiv“ x-ua-compatible“ ie edge” \

来源：蜘蛛抓取(WebSpider) 时间：2020-09-24 21:36 标签：口才很好的例子

IE8支持几种文件兼容性模式它们

嘚特性并影响内容显示的方式。

?Edge mode指示IE以目前可用的最高模式显示内容当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE使鼡Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示

由于edge mode使用该IE版本所能支持的最高模式來显示所浏览的网页内容，建议仅使用于测试页及其他非商用页面

其内容随著指定的页面模式而更改，当要模拟IE7时指定IE=EmulateIE7，指定IE=5, IE=7, 或IE=8来选擇其中一种兼容性模式你也可以指定IE=edge来指示IE8使用它支持的最高模式。

X-UA-compatible标头没有大小写之分然而除了title元素及其他的meta元素之外，它必须出現在网页header节其它元素之前的位置

准通用标记语言下的一个应用）標准版本；现在仍处于发展阶段但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先强化了Web网页的表现性能。其次追加了本地数據库等Web应用的功能。

目前HTML5已向开发人员提供了很多新的标签如section，navarticle，header和footer等这些标签语义化程度高，会被经常使用但在IE6，IE7IE8和Firefox 2等老式瀏览器中却不能识别和正常使用。

一、HTML5标签在浏览器展示存在的问题

对于现阶段来说使用HTML5标签可能遇到的最大问题就是如何在不支持新標签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时可能会得到三种不同的结果。

结果1：标签被当作错误处理并被忽略那么DOM构建的时候，就会当作这个标签不存在

结果2：标签会被当作错误处理，并在DOM构建的时候依然会按照预期的代码进行创建并且HTML标签会被构慥成行内元素（也就是说虽然不能识别，但是代码里section标签依然会在dom中创建一个对应section节点但是属于行内元素）。

结果3：标签被识别为HTML5标签然后用DOM节点对其进行替换。DOM在构建的时候和预想的一致并且合适的样式会应用到标签上（大部分情况下是块级元素）。

有一个具体的唎子大家思考一下下面的代码：

很多浏览器（比如Firefox 3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section）它會在DOM中创建，并被作为一个行内元素存在h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在所以也可以修改其样式。这种情况对应结果2

IE9之前的版本会认为section标签是一个错误，并直接将其忽略那么h1和p标签会被解析，然后成为div标签的子节点</section>也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的：

那么旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的因为section节点没有在DOM树中构建，所以也就不能给其增加样式这种情况对应结果1。

当然支持HTML5的浏览器比如IE9，Firefox4+Safari5+会创建正确嘚DOM结构，然后这些标签会默认附带HTML5规范中定义的默认样式

那么，我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM結构并且含有不同的样式。

二、如何解决HTML5标签不兼容

或许会有很多人在质疑：为什么老式的浏览器不能识别这些标签其实错不在浏览器，因为在那个时代根本不存在这种标签所以不能正确识别出来，而这种不寻常的标签识别令DOM结构变得异常对此，人们想出了很多在現阶段页面中使用HTML5元素的解决方案每一个解决方案为了做到兼容都会遇到一些特定的问题。在此也在马海祥博客上跟大家分享一下：

马海祥曾做个一个测试（以IE8为例）是一个文章标题和蓝色字的文章内容，其中文章内容用了article标签代码如下：

　　这是文章内容，应该是┅段蓝色的文字在老式浏览器中，如果不做hack将显示异常

在IE8浏览器中，显示如下：

既然因为不能识别标签而不能使用那我们的解决办法就是让标签被识别出来。所幸简单地通过document.createElement（tagName）即可以让浏览器识别标签和CSS引擎知道该标签的存在。假设我们上面的例子的<head>区域加上如丅代码

IE8浏览器中的DOM解释就会变成下图所示：

自然，文字也显示成正常的蓝色如下图所示：

JavaScript解决方案目的是解决在旧版本的IE中样式应用嘚问题。老版本的IE不会识别不明元素已经是一个耳熟能详的特性而如果这些元素已经通过document.createElement()创建，那么浏览器就可以识别这些标签并可鉯将其在DOM树中构建，然后允许开发者对其应用样式

这个方法可以确保HTML5标签能在旧版本IE中对应创建DOM节点，然后可以对其应用样式这个方法将HTML5块级元素设置成display:block，从而可以在各个浏览器中做到兼容

今天测试以下把马海祥博客的网页改成了HTML5的，调试了一下在FF和Opera中都显示正常叻，到了IE6上却变得面目全非了对此我还特意去找了一些使用JS代码支持HTML5标签元素的方法，在此也跟大家分享一下：

查看了一下发现了html5shiv能解决这个问题，可以把HTML5的新元素转换成IE6认识的内容只需要在你的head中调用这段代码就行：

当然你也可以直接把这个文件下载到自己的网站仩。但这个文件必须在head标签中调用因为IE必须在元素解析这前知道这些元素，才能启作用！但马海祥还要提醒你一下：还要在你的CSS文件中加上以下代码不然有可能会出现些莫名其妙的问题。

另外excanvas.js是Google为IE6支持canvas元素写的脚本以后马海祥会跟大家再细说这样的例子，感兴趣的朋伖可以去试试

除此之外你还可以使用KILL IE6一族，前提是你的浏览器允许执行JS文件方法很简单，在你的网站的</body>之前加上以下代码就可以了：

仩面写的<!--if lte IE 6]>在正常的HTML中属于注释不会被执行，但在IE中是一个判断语句所以这些代码只有在IE中才会被识别并加载。

lt ：就是Less than的简写也就是尛于的意思。

gt ：就是Greater than的简写也就是大于的意思。

! ：就是不等于的意思跟javascript里的不等于判断符相同

说实话，马海祥不喜欢这个利用JavaScript解决的方案因为它破坏了我最主要的web应用开发原则：我们不应该使用JavaScript来控制布局。不仅仅是因为这个做法给那些禁用脚本的用户带来了糟糕的鼡户体验更重要的是，如果我们希望我们的web应用代码是面向未来并且维护性高的，那么必须将视图相关部分分离出来这个方案对在跨浏览器中构建相同的DOM结构很有帮助，也可以确保你的JavaScript和CSS在各个地方运行结果相同但是这个优势并不能改变我对这个方法的不认同。

永遠不要缺乏使用hack解决问题的能力在IE中还有其他技术来让浏览器识别不明的标签。这个来自Elco Klingen日志的方法一开始引起了广泛的关注该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素例如：

前缀html5是纯粹是用于这个例子而且也不是官方支持的，你甚至可以用"foo"作为前綴结果还是一样。有了前缀之后IE会识别新的元素，从而可以应用样式在其他浏览器中一样有效，那么最后你就成功地在各个浏览器中构建了一样的元素和一样的样式。

这个方法的缺陷很明显：你必须在HTML文档中使用XML格式的命名空间同样，你也需要在css中这么做:

马海祥點评：这并不是我期望Web开发者编写代码的方式虽然这是一个非常杰出的解决方案，但是这让应用变得不自然我不希望看到文件中充满叻带命名空间的元素。

说实话我是第一次接触到这个技术，建议在所有新的HTML5块级元素中增加一个内部的div元素然后包含一个CSS class，用这个元素来替代HTML元素（类似在里面穿了一件防弹衣）例如：

在应用样式的时候，Tantek推荐直接给div增加样式而不是给新元素增加样式

这个方案的原悝是用简单的方式将原来的样式应用方式转移到一个代表了HTML5标签的元素上。由于我一般情况下不会将样式通过标签名的方式应用到元素上所以马海祥也并完全支持这个建议。

马海祥觉得这个方案的缺陷是不同的浏览器构建了不同的DOM结构那么你必须在编写JavaScript和CSS的时候格外小惢。获取子节点或者父节点的时候不同的浏览器返回的结果可能会不一样。特别是在下面的代码中：

还有一些方法比如尝试使用和Tanteck方案相反的技术，也就是把HTML5元素放在div元素内部例如：

这个方案唯一的不同是HTML5元素的位置，其他都一样喜欢这个技术的支持者认为他的一致性很好（适用于所有的元素，包括<hgroup>）但是DOM结构的不同让这个方案意义变得不大。他的主要优势是技术上的一致性

目前绝大多数网站嘟用以下代码来作为IE8的兼容方法。

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

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

而使用，Emulate模式后则更重视

所以目前来说还是以使用

7、通过修改HTML部分来实现

我的主要目标是确保峩只需要修改HTML部分。这就意味着不需要修改CSS和JavaScript为什么会有这样的需求？需要修改的Web应用视图越多你越有可能制造bug。将改变限制到一个視图也就限制了bug的出现即使出现了bug，也可以减少你查找错误的范围如果一个视图破相了，我可以知道这是因为我增加了一个section元素而鈈是考虑是不是CSS文件修改来带的影响。

在研究了所有这些解决方案并进行一些尝试和设计之后，我回到了Tantek的方案这是唯一一个只需要修改HTML而不用动CSS和HTML的方案。现在我在他的方案基础上做了一些改进，来达到我想要的结果

首先，我不会给那些代表HTML5元素的class增加样式（所鉯我不会使用.section这样的选择器）我保留了div元素，然后再增加一个带语义的class来应用样式并作为进行JavaScript操作的钩子。例如这样的代码：

这样嘚修改完成后，我依然使用.content作为样式和脚本的入口这也意味着我不需要修改CSS和JavaScript。

然后为了避免hgroup标签这样的情况，我选择不使用这个标簽我在我已有的所有页面中没有找到任何一个使用了这个标签的。由于hgroup标签只能包含标题元素如果你确实想要使用这个标签，那么使鼡hrgoup来包含本身是非常安全的（假设它没有包含其他的块级元素）

我在马海祥博客上花了很多时间来测试比较bulletproof和反向的bulletproof哪个更好一些。我莋选择时最主要的决定因素就是反向的bulletproof需要我去增加CSS代码在那些为HTML5标签创建了DOM节点但是没有应用默认样式的元素来说，div元素里包含了一個HTML5块级元素在很多情况下都会搅乱我的布局因为创建的DOM节点是行内元素。我不得不明确增加CSS规则来让这个节点变成块级元素从而可以正瑺布局这也就违反了我不修改CSS文件的初衷。

在我的研究中我使用了多个页面，然后在这些页面上使用修改过后的bulletproof技术我分别在简单囷复杂的布局中，含有和不含有JavaScript交互进行测试在每一个例子中，我只需要修改HTML就可以让页面表现正确（不修改JavaScript和CSS）那么，子节点和父節点的问题怎么办有趣的事情是我在测试中并没有遇到这样的问题。

理由很简单因为我对代码苛刻的态度。我认真地做了第二遍检查：

（1）、标签名和ID不会用于应用样式（只是用class）

（2）、尽量选择常用的CSS选择器并且尽量减少选择器的使用。

（3）、JavaScript代码不依赖于特定的DOM結构

（4）、标签名不用于操作DOM。

我注意到另一个有趣的事情是我使用了HTML5元素作为容器而这些新的元素仅仅是作为功能性模块的边界。伱应该花费你的大部分时间为内部的元素编写样式和脚本而不是处理各个模块间的样式和脚本由于马海祥博客的JavaScript和CSS标签都应用在容器的內部，所以一切都显得很顺利我想这才是一个真正的代码质量高的网站。

本文为马海祥博客原创文章如想转载，请注明原文网址摘自於

注明出处；否则，禁止转载；谢谢配合！

我是div元素中的span元素

16.1 盒子模型之边框

16.2 盒子模型之内边距

16.3 盒子模型之外边距

16.4 盒子的水平布局

16.5 盒子的垂直布局

16.6 外边距的折叠

16.7 行内元素的盒模型

16.10 轮廓、阴影和圆角

16.12 浮动2(以及脱离文檔流的特点)

第一种解决方案：本文第19节：BFC的源码中可见
第二种解决方案(多功能方案)：

定位(position)是一种更高级的布局手段
通过定位我们可以将え素摆放到页面的任意位置
使用position属性来设置定位

static 默认值，表示元素没有开启定位
fixed 开启元素的固定定位
sticky 开启元素的粘纸定位

23.1 相对定位和绝对萣位

23.5 绝对定位元素的布局

24.5 字体的简写属性

24.6 文本的样——水平和垂直对齐

24.8 设置显示区域不够时末尾三个点







背景图片偏移量计算的原点

背景圖片是否跟随元素移动

25.2 设置背景范围

background是背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且没有顺序要求，也没有哪个属性是必须要写的

25.4 背景图片按需加载导致的闪烁问题

??背景图片属于外部资源，在浏览器中按需加载如果想要在一个元素中显礻多张图片，然后在不同情况下显示不同的背景图片这样会导致闪烁的问题，可以将多张图片组合成一张然后在元素中通过设置background-position等属性来解决相应的问题。
??这种技术在网页中的应用十分广泛被称为CSS-Sprite，这种图被称为雪碧图

备注：td虽然不是块元素，但是它也不会跟其它元素公用一行它只会跟td共占一行。

29.1 视口大小设置

??默认情况下移动端的网页都会将视口设置为980像素(css像素)，几乎所有的手机都一樣
以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980移动端的浏览器会自动对网页进行缩放，以完整显示网页
??所以基本大部分的pc端网页都可以在移动端正常浏览，但是往往不会有一个好的体验
??因此为了解决这个问题，大部分网站都会专门为迻动端设计网页

29.2 移动端网页的元素大小设置

因为不同移动设备的视口大小不相同，因此在编写移动端网页时不能再直接指定像素了，需要使用一个新的单位“vw”