IEのドキュメントモード、およびTextarea提示バグの一例
4886 ワード
非常に簡単なページを作りました.htmlコードは数行しかありません.内容は以下の通りです.
ローカルテストでは、次の図のようなインタフェースが完全に正常です.
しかし、サーバに公開されてからアクセスすると、表示されるインタフェースは次のようになります.
すなわち、中間のTextAreaの高いが違う、100%の設定が機能しなくなった.
さらに、私はローカルで実験を続けました.もともと私が使っていたアドレスはlocalhostで、localhostを私の機械名に変更しました.やはり、現象はサーバーにそっくりで、textareaの高さに問題がありました.
ps:私が使っているブラウザはIE 10です.
私はまた別のパソコン(IE 6)でこのページにアクセスしたが、結果も図2のように正確に高さが現れなかった.
chromeと置き換えると、すべての場合に100%正確に高さを示すことができる.
この問題を研究してみると、IEはlocalhostに対して特殊な処理を行い、localhostと他のドメイン名が採用したデフォルトのドキュメントモードは異なることが分かった.
ドキュメントモード
IE上でF 12を押して、開発ツールウィンドウ(IE 7以上にこの機能があるはず)を開き、一番右側にドキュメントモードが表示されます.
IE 10は、上の図に示すような6種類の文書モードをサポートする、マウスクリックやショートカットキーで文書モードを切り替えることができ、切り替え後、ページの表示が直ちに変更される.
このうちStandardsモードは「最新」である、すなわち、できるだけw 3 cの規格に従って提示され、この結果は一般的にchromeなどのブラウザと一致する.
QuirksモードはIE 5およびそれ以前のバージョンからのIEである.下向き互換モードである.
この2つの典型的なモードに加えて、IE 7,8,9の3つの異なる規格、およびIE 5 quirksも同時にサポートする.
IEドキュメントモードの選択基準は、ドキュメント上部のは、ドキュメントにdoctype宣言がない場合、IEはこれが以前の古いページであり、quirksモードで現れると考えている.doctypeがある場合はdoctypeによって自動的に選択する.
ただし、上記のコードにはタグはhtml 5ページであることを示す.
本来、IEはこれがhtml 5ページであることを発見し、standardsモードで提示すべきだったが、なぜ実際にIE 7 standardsを自動的に選択したのか.探してみましたが、Tools->Compatibility View Settingsウィンドウで、Display intranet sites in compatibility viewオプションがデフォルトでチェックされています.
ローカルエリアネットワークのすべてのページに対して互換モードを開くことを意味し、これによりIE 10はhtml 5ページに対してIE 7規格を選択したが、localhostは異なり、互換モードで提示することなく特殊な処理を行う.これをキャンセルして、マシン名でテストしてみると、やはり正常に現れて、ドキュメントモードをチェックして、確かにStandardsモードです.予想にぴったり合う
また、互換性メタデータを使用して、IEのページがどのモードで表示されるかを示すことができます.
ページのヘッダに上記メタデータを追加する後、再びIEで当該ページにアクセスすると、IE 9 Standardsモードが使用されていることがわかる.
上記コードのうちのIE=9を、IE=7またはIE=8またはIE=10とすると、IEを、それぞれ、IE 7 standards、IE 8 standards、およびStandards(IE 10規格)モードで提示ことができる.(前節のLAN互換オプションが有効になっていても、そのままです)
具体的に指定するIEのバージョンを除いて、一般的には、IEのアップグレード時にコードを変更する必要がなく、最新のバージョン解析を使用するように要求する「IE=edge」を使用することがより好ましい.
ドキュメントモードはJSでdocumentを通過することもできる.documentMode属性読み出し
したがって、ページが所望に合うように提示するためには、htmlコードに上記指令を加える、IEにどの文書モードを選択するかを明確に伝え、異なるクライアントに異なる提示結果が出ないようにする必要がある.
Textarea提示BUG
また、本明細書の冒頭で述べるtextarea提示bugに戻る.
試験により、このバグはIE 6のみ、およびIE 7 standardsモードで発生し、Quriksモードで正常であることが明らかになった.
従って、IE 7以上のバージョンのブラウザについては、X-UA-Compatibleメタデータを追加すればよい.
また、IE 6及びIE 7については、100%という設定をキャンセルする、絶対画素法で高さを設定するしかない.
Textareaについて:
aspxページでは、のTextModeがMultiLineの場合、クライアントでTextareaとして表示され、
したがって、aspxファイルでも上記の問題を簡単にコピーすることができ、次のコードを1行コピーすればよい.
<!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:私が使っているブラウザはIE 10です.
私はまた別のパソコン(IE 6)でこのページにアクセスしたが、結果も図2のように正確に高さが現れなかった.
chromeと置き換えると、すべての場合に100%正確に高さを示すことができる.
この問題を研究してみると、IEはlocalhostに対して特殊な処理を行い、localhostと他のドメイン名が採用したデフォルトのドキュメントモードは異なることが分かった.
ドキュメントモード
IE上でF 12を押して、開発ツールウィンドウ(IE 7以上にこの機能があるはず)を開き、一番右側にドキュメントモードが表示されます.
IE 10は、上の図に示すような6種類の文書モードをサポートする、マウスクリックやショートカットキーで文書モードを切り替えることができ、切り替え後、ページの表示が直ちに変更される.
このうちStandardsモードは「最新」である、すなわち、できるだけw 3 cの規格に従って提示され、この結果は一般的にchromeなどのブラウザと一致する.
QuirksモードはIE 5およびそれ以前のバージョンからのIEである.下向き互換モードである.
この2つの典型的なモードに加えて、IE 7,8,9の3つの異なる規格、およびIE 5 quirksも同時にサポートする.
IEドキュメントモードの選択基準は、ドキュメント上部のは、ドキュメントにdoctype宣言がない場合、IEはこれが以前の古いページであり、quirksモードで現れると考えている.doctypeがある場合はdoctypeによって自動的に選択する.
ただし、上記のコードにはタグはhtml 5ページであることを示す.
本来、IEはこれがhtml 5ページであることを発見し、standardsモードで提示すべきだったが、なぜ実際にIE 7 standardsを自動的に選択したのか.探してみましたが、Tools->Compatibility View Settingsウィンドウで、Display intranet sites in compatibility viewオプションがデフォルトでチェックされています.
ローカルエリアネットワークのすべてのページに対して互換モードを開くことを意味し、これによりIE 10はhtml 5ページに対してIE 7規格を選択したが、localhostは異なり、互換モードで提示することなく特殊な処理を行う.これをキャンセルして、マシン名でテストしてみると、やはり正常に現れて、ドキュメントモードをチェックして、確かにStandardsモードです.予想にぴったり合う
また、互換性メタデータを使用して、IEのページがどのモードで表示されるかを示すことができます.
ページのヘッダに上記メタデータを追加する後、再びIEで当該ページにアクセスすると、IE 9 Standardsモードが使用されていることがわかる.
上記コードのうちのIE=9を、IE=7またはIE=8またはIE=10とすると、IEを、それぞれ、IE 7 standards、IE 8 standards、およびStandards(IE 10規格)モードで提示ことができる.(前節のLAN互換オプションが有効になっていても、そのままです)
具体的に指定するIEのバージョンを除いて、一般的には、IEのアップグレード時にコードを変更する必要がなく、最新のバージョン解析を使用するように要求する「IE=edge」を使用することがより好ましい.
ドキュメントモードはJSでdocumentを通過することもできる.documentMode属性読み出し
したがって、ページが所望に合うように提示するためには、htmlコードに上記指令を加える、IEにどの文書モードを選択するかを明確に伝え、異なるクライアントに異なる提示結果が出ないようにする必要がある.
Textarea提示BUG
また、本明細書の冒頭で述べるtextarea提示bugに戻る.
試験により、このバグはIE 6のみ、およびIE 7 standardsモードで発生し、Quriksモードで正常であることが明らかになった.
従って、IE 7以上のバージョンのブラウザについては、X-UA-Compatibleメタデータを追加すればよい.
また、IE 6及びIE 7については、100%という設定をキャンセルする、絶対画素法で高さを設定するしかない.
Textareaについて:
aspxページでは、
したがって、aspxファイルでも上記の問題を簡単にコピーすることができ、次のコードを1行コピーすればよい.