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%這個設定, 採用絕對像素法設定它的高度.