defer 属性つき script 定義と IE の問題
外部スクリプトファイルを定義する script 要素 に defer="defer" 属性を追加すると、あるケースで、internet explorer (IE) がそのスクリプトファイルを解析できなくなるという問題の紹介です。 「あるケース」というのは、div 要素などの innerHTML を書き換えることです。自分でそのようなコートを書かなくても、例えば、SWFObject を使って Flash を埋め込む場合に innerHTML の書き換えが行われます。 ただし、html コードを書く順番が問題で、defer 属性を追加した script タグが出現した後、innerHTML を書き換える場合に限ります。順番が反対の場合は問題は起こりません。 確証がないのではっきりしたことは言えませんが、自分が試した限りでは、スクリプトの取得に時間がかかる（サーバーの応答が遅い）と問題が発生する
6. script with defer (IE bug) - async/defer属性とDOM構築
実行結果 Hello World! マークアップ <p id="result"> Hello <script src="D.js" defer></script> <script src="E.js" defer></script> <script src="F.js" defer></script> World! </p> 解説 script[defer] doesn’t work in IE<=9 で報告されている「IE9 以下で jquery.js と jquery-ui.js をそれぞれ defer 属性付きで読み込んだ際に起きるバグ」を単純化して再現しました。 発生原因は innerHTML を介して既存 DOM に 直接 HTML を挿入することと推定されており、本例では D.js、E.js、F.js を次のようなコードにして、スクリプトの実行が途中でストールしてしまう様子を再
IE9 だと table を block にできない
IE9 だと、 <table> <tr> <th>th</th> <td>td</td> </tr> </table> に対して、 th,td{ display:block; } としても、横並びのままで意図した表示にならない。float を適用すると強制的に block になるので以下を試したところ、table-cell のような表示ではなくなった。 th,td{ float:left; clear:both; } この方法でなら、media queries を併用してもしっかり動作した。 @media(max-width:640px){ table{ border-collapse:collapse; } th,td{ float:left; clear:both; } }
IE9以前におけるスタイルシート制限 | HTML5GOGO
HTML5の内容ではありませんが、IEの仕様でどうしても確認しておきたいものがありましたので検証してみました。 IEの気になる仕様は下記のスタイルシートの制限についてです。 (1) IE9以前で1つのCSSファイル、または1つのstyleタグ内のセレクタは4095個目までしか適応されない。 (2) IE9以前でCSSファイル、またはstyleタグは31個目までしか適応されない。 Microsoft サポート http://support.microsoft.com/kb/262161/ja http://support.microsoft.com/kb/262161/en-us 普通にコーディングする分には問題無いように思いますが、SCSSなどを使用した際にうっかり4096個以上のセレクタが指定されてしまう可能性が無いとも言えないので軽視できません。 検証1 早速(1) 「IE9以前で1つ
CSS スタイル Web ページがインターネット エクスプローラーで誤ってレンダリングされる - Browsers
警告 廃止され、サポート対象外となった Internet Explorer 11 デスクトップ アプリケーションは、特定のバージョンの Windows 10 で Microsoft Edge の更新プログラムを通じて完全に無効になります。 詳細については、「Internet Explorer 11 デスクトップ アプリの廃止に関する FAQ」をご覧ください。 この記事では、CSS スタイル Web ページがインターネット エクスプローラーで正しく表示されない問題を説明する手順について説明します。 元の製品バージョン:インターネット エクスプローラー 元の KB 番号: 262161 現象 Web ページのスタイルが見つからないか、インターネット エクスプローラーでページが読み込まれたときに正しく表示されません。 次のエラー メッセージが表示される場合もあります。 探しているページが移動され
Compat Inspector
Compat Inspector is a JavaScript-based testing tool that analyzes your site while it runs. Compat Inspector watches for patterns of interaction known to cause issues and reports them automatically. This allows you to identify problems quickly without first memorizing a bunch of documentation. See this page to learn how to use it. To help demonstrate Compat Inspector, known compatibility patterns h
vw, vh, vm(vmin)という単位についての覚え書き
「CSS Values and Units Module Level 3」のViewport-relative lengths（または Viewport-percentage lengths）についての覚え書きです。 これは新しく追加された長さの単位です。 CSS Values and Units Module Level 3 - 5.1.2. Viewport-relative lengthsCSS Values and Units Module Level 3 - 5.1.2. Viewport-percentage lengths上は2011年9月6日版のWorking Draftの仕様へのリンクで、下がEditor’s Draftの最新版へのリンクです。 Editor’s Draftの方は2011年12月13日版を参考にしていますが、ページが見つからないので最新版へのリンクにしてあ
Sizing with CSS3's vw and vh units
CSS3 introduces a few new units. (Oh wait, I've said that before.) So, you've heard about px, pt, em, and the fancy new rem. Let's look at a couple more: vw and vh. Often times, there are certain elements within our design that we'd like to ensure can fit into the viewport in their entirety. Normally, we'd have to use JavaScript to do this. Check the size of the viewport and then resize any elemen
dropboxをIE9で見るとDocument Modeが7になる件について - hokaccha memo
Document Modeが7だとaddEventListenerとか使えない。色々検証したけどよくわからんくてyomotsuに教えてもらった。 これがDocument Modeを決めるフローで http://ieblog.members.winisp.net/misc/How%20IE9%20Determines%20Document%20Mode.svg こういうリストがあってこいつを参照するらしい。 http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml んで、ここに <domain>dropbox.com</domain> というのがあって If a domain element does not contain additional attributes, webpages on the affected site are
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
7. script with defer (IE fix) - async/defer属性とDOM構築