做了个非常简单的页面, 仅有几行html代码, 内容如下:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <table>

        <tr>

            <td style="width:800px;height:300px;border:1px solid red;">

                <textarea style="width:100%;height:100%"></textarea>

            </td>

        </tr>

    </table>

</body>

</html>

在本地测试的时候是完全正常的, 界面如下图:

但是发布到服务器上以后再访问, 呈现的界面却变成了这样:

即,中间的TextArea高度不对, 100%的设定不起作用了.

进一步的, 我继续在本地试验, 原先我用的地址是localhost, 把localhost改成我的机器名, 果然, 现象跟服务器一模一样, textarea的高度出问题了.

ps: 我用的浏览器是IE10.

我又在另一台电脑(IE6) 上访问这个页面, 结果也是如图2那样, 没有正确呈现高度.

如果换用chrome, 则在所有情况下都能正确按100%呈现高度.

研究了一下这个问题, 发现原来IE对localhost是做了特殊处理的, localhost和其它域名所采用的默认文档模式是不同的.

文档模式

在IE上按F12, 打开开发工具窗口( 应该IE7以上都有这个功能) , 最右侧即显示文档模式:

IE10支持如上图所示的6种文档模式, 可以通过鼠标点击, 或快捷键来切换文档模式, 切换以后, 页面的呈现即立即改变.

其中, Standards模式是”最新的”,即, 尽量按照w3c的标准来呈现, 这个结果一般与chrome等浏览器一致.

而Quirks模式是来自IE5以及更早版本的IE. 是一种向下兼容模式.

除了这两种典型模式以外, 还同时支持IE7,8,9 三种不同的标准, 以及IE5 quirks .

IE选择文档模式的标准是取决于文档顶部的<!DOCTYPE>, 当文档没有doctype声明时, IE认为这是很早之前的老页面, 将以quirks模式呈现. 当有doctype时, 则按照doctype的不同自动选择.

其中, 上述代码中<!DOCTYPE html> 标记表明这是html5页面.

本来, IE发现这是html5页面, 应该采用standards模式呈现, 为什么在实践中却自动选择了IE7 standards? 我找了一下, 在Tools->Compatibility View Settings窗口中, 默认勾选了Display intranet sites in compatibility view选项:

意思是对局域网的所有网页开启兼容模式, 这导致IE10 对html5页面选择了IE7 标准, 而localhost则不同, 它被做了特殊处理, 不以兼容模式呈现. 取消此项, 再用机器名测试一下, 果然正常呈现了, 检查文档模式, 确实是Standards模式. 完全符合预期.

此外, 可以通过兼容性元数据来告诉IE 某个页面要用哪个模式去呈现:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

在页面的head中增加上述元数据后, 重新用IE访问该页面, 可以发现IE使用了IE9 standards模式.

把上述代码中的IE=9换成IE=7或IE=8 或IE=10,  则可以分别让IE用IE7 standards, IE 8 standards, 以及Standards( IE10 标准) 模式呈现.  (即使启用了上节的局域网兼容选项, 也仍然如此)

除了具体指定IE的版本, 一般来说, 更好的选择是使用"IE=edge" , 该指令要求IE使用最新的版本解析(而不必在IE升级的时候去改代码).

文档模式也可以在JS中通过document.documentMode属性读出.

因此, 为了让页面能够符合预期地呈现, 应该在html代码中增加上述指令, 明确地告诉IE选择哪个文档模式, 避免不同的客户端出现不同的呈现结果.

Textarea呈现BUG

还回到本文开头所提及的textarea呈现bug.

测试表明, 该bug仅在IE6下, 以及IE7 standards模式下出现,  在Quriks模式下正常.

因此, 对于IE7以上版本的浏览器, 只要增加X-UA-Compatible元数据即可.

而对于IE6以及IE7, 就没有什么好办法了, 只能取消100%这个设定, 采用绝对像素法设定它的高度.

关于Textarea:

在aspx页面中, 当<asp:TextBox /> 的TextMode为MultiLine时, 将在客户端呈现为Textarea,

因此在aspx文件中也可以很容易地复制上述问题, 如下一行代码即可:

<asp:TextBox ID="txt1" runat="server" TextMode="MultiLine" Width="100%" Height="100%" />

IE的文档模式, 及Textarea呈现bug一例的更多相关文章

  1. DOCTYPE是什么鬼？文档模式又是什么鬼？

    !DOCTYPE !DOCTYPE是什么: 在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型, 告诉浏览器要通过哪一种规范(文档类型定义 DTD)解析文档( ...

  2. IE11新文档模式Edge介绍与评估，及在WebBrowser应用中的使用。

    浏览器模式与文档模式概念是怎么来的? 1.浏览器模式与文档模式概念起源 为了解决兼容性的问题,在IE浏览器(IE8, IE9, IE10)中,引入了浏览器模式和文档模式两个概念,浏览网页时可以通过按F ...

  3. 【IE】浏览器模式与文档模式 及其开发中处理方式

    原文:http://blog.csdn.net/neo_liu0000/article/details/7589731 什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和 ...

  4. 1关于script标签属性，注意点，浏览器文档模式，各种数据类型的转化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 关于HTML文档的文档模式

    HTML文档的文档模式包括混杂模式和标准模式,这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行. 如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开 ...

  6. 关于文档模式、DCOTYPE声明及严格模式

    1.文档模式 文档模式的概念是由IE5.5引入,通过使用文档类型(DOCTYPE)切换实现的.不同的文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScr ...

  7. 浅谈HTML文档模式

    不知道爱多想的你有没有在编写HTML代码时思考过 <!DOCTYPE html> 或是这一长串看都看不懂的 <!DOCTYPE HTML PUBLIC "-//W3C//D ...

  8. 《javascript高级程序设计》笔记：文档模式

    文档模式是用于指定浏览器使用什么样的标准来正确的显示网页,各个标准的解析存在着差异 文档类型的分类 文档模式大致分为三种类型: 混杂模式(quirks mode) 标准模式(standards mod ...

  9. 360浏览器遇到文档模式是IE7的解决办法

    这段时间遇到了360浏览器在加载java项目时,默认的文档模式是IE7,使得网页加载下拉框出现问题. 解决的方法是: 在显示的jsp页面加上 <meta http-equiv="X-U ...

随机推荐

  1. ！HDU 1078 FatMouse and Cheese-dp-（记忆化搜索）

    题意:有一个n*n的格子.每一个格子里有不同数量的食物,老鼠从(0,0)開始走.每次下一步仅仅能走到比当前格子食物多的格子.有水平和垂直四个方向,每一步最多走k格,求老鼠能吃到的最多的食物. 分析: ...

  2. hibernate的配置, 增删改查

    路径:查找路径 实际上都是查找编译后的对应的路径,在bin文件夹中总 增删改必须开启事务才行 hibernate加载文件的两种方式 configure 1.引包 antlr-2.7.6.jar bac ...

  3. Python 射线法判断一个点坐标是否在一个坐标区域内

    class Point: lng = '' lat = '' def __init__(self, lng, lat): self.lng = lng self.lat = lat # 求外包矩形 d ...

  4. python-循环while

    while 只要…条件成立,就一直做…. for 循环会在可迭代的序列被穷尽的时候停止,while 则是在条件不成立的时候停止,因此 while 的作用概括成一句话就是:只要…条件成立,就一直做…. ...

  5. spring-cloud-config笔记

    忽略元数据末尾 回到原数据开始处 spring-cloud-config 简单来讲就是spring-cloud实现的分布式配置中心.与之前介绍的开源配置服务方案 disconf是一样的,spring- ...

  6. mui中删除某个节点的子节点

    targetNode.removeChild(targetNode.firstElementChild);//删除元素的第一个子节点

  7. [python小记]使用lxml修改xml文件，并遍历目录

    这次的目的是遍历目录,把目标文件及相应的目录信息更新到xml文件中.在经过痛苦的摸索之后,从python自带的ElementTree投奔向了lxml.而弃用自带的ElementTree的原因就是,na ...

  8. Ajax同步与异步优缺点与使用

    一.什么是同步请求:(false)       同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能 ...

  9. Makefile 13——理解make的解析行为

    make是以从上到下的顺序读入Makefile中的内容的.然而,处理Makefile中的语句却并非完全从上到下. 大体上,make处理一个Makefile分为两个阶段.第一个阶段包含: 1.make读 ...

  10. svn还原文件中去掉已经删除的文件

    1.到svn目录下,选择文件并提交 2.在弹出的对话窗口中,选择文件并右击,找到"解决" 3.再次点击"还原"的时候,已经删除的文件就没有了.