14 Sep 09 CSSは、あなたのIEブラウザをクラッシュさせます。(Crash your IE)
16815 ワード
1 crash IE 6 code
Demo:http://blog.gulu77.com/demo/200808/crash_ie6.html
このBUGはIE 6にしか存在しません。疑似クラスがa:activeの時も同じです。
a{position:relative;}
a:hover{float:left;}
解決策:aのためにzoomを追加します。ハスラayoutを触発させる
- a{position:relative;zoom:1;}
- a:hover{float:left;}
2 crash IE 6 codeこれはHTML構造のエラーで、IE 6がクラッシュしました。<col width=”100”/”の前または後に任意の文字を追加すると、IE 6 Crashが発生します。
Demo:http://blog.gulu77.com/demo/200808/HTML_errors_crash_ie6.html
- <table style="table-layout:fixed;">
- <colgroup>
- <col width="100"/>Crash IE6
- </colgroup>
- </table>
3 crash IE 7 codeDemo:http://blog.gulu77.com/demo/200808/crash_ie7.html
Bug from 偷米饭、このbugは、IE 7において、省略ワードの処理時にIE 7が崩壊すると推定されている。
- <style type="text/css">
- div{float:left;width:175px;}
- ul{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
- li{position:relative;}
- </style>
- <div>
- <ul>
- <li>崩溃崩溃崩溃崩溃崩溃crash ie7</li>
- <li>崩溃崩溃崩溃崩溃崩溃crash ie7</li>
- </ul>
- </div>
ソリューション:
- <style type="text/css">
- div{float:left;width:175px;}
- ul{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
- li{position:relative;zoom:1;}
- </style>
4 crash IE 6 code Demo:http://blog.gulu77.com/demo/200808/crash_ie6_test1.html位置を変更すると、ブラウザがクラッシュしますが、N個の共犯者が崩壊するコードの中でCSS tableの位相属性は全部欠けているようです。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>CRASH-IE,CSS让你的IE浏览器崩溃</title>
- <style type="text/css">
- html, body {overflow: hidden;scrollbar-base-color: #330066;}
- .crash {position:absolute;left:200px;top:200px;width:200px;}
- </style>
- <script type="text/javascript">
- function galgenfrist() {
- window.setTimeout('crashIE();',1000);
- }
- function crashIE() {
- var moveNode = document.getElementById("move");
- if(moveNode) {
- moveNode.style.top = "100px";
- moveNode.style.left = "200px";
- }
- }
- </script>
- </head>
- <body onload="galgenfrist();">
- <h1>CRASH-IE</h1>
- <div id="move" class="crash">
- <table>
- <tbody>
- <tr>
- <td>
- <textarea></textarea>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </body>
- </html>
5 crash IE 6 code Demo:http://blog.gulu77.com/demo/200808/crash_ie6_test2.html具体的に原因はしばらく解析できませんが、互換性と実行効率から見ると、普通はこのような書き方はしません。
- <script>
- for (x in document.write) {
- document.write(x);}
- </script>
6 crash IE 6 code Demo:http://blog.gulu77.com/demo/200808/crash_ie6_test3.html伝説は日本人が発見したもので、tableに直接内容を置いて、IE 6でMshtml.allモジュールが破損してブラウザを閉じます。IE 6でないと安全です。
- <style>
- * {position:relative}
- </style>
- <table>
- <input>
- </table>
7 crash IE 6 code Demo:http://blog.gulu77.com/demo/200808/crash_ie6_test4.html
- <body onLoad=”window()”>
8 crassh IE 6 code Demo:http://blog.gulu77.com/demo/200808/crash_ie6_test5.html CSSに@+任意の文字+/*が現れてすぐに崩壊します。
- <style>
- @;/*
- </style>