IE的文档模式, 及Textarea呈现bug一例

时间 2019-11-08

标签文档模式 textarea 呈现 bug 一例繁體版

原文原文链接

作了个很是简单的页面, 仅有几行html代码, 内容以下: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>

在本地测试的时候是彻底正常的, 界面以下图:html5

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

即,中间的TextArea高度不对, 100%的设定不起做用了. 浏览器

进一步的, 我继续在本地试验, 原先我用的地址是localhost, 把localhost改为个人机器名, 果真, 现象跟服务器如出一辙, textarea的高度出问题了. 服务器

ps: 我用的浏览器是IE10. 工具

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

若是换用chrome, 则在全部状况下都能正确按100%呈现高度. 测试

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

文档模式spa

在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 某个页面要用哪一个模式去呈现:

在页面的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%" />