重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

IE9でブラウザを拡大した際にクラッシュするCSSの回避方法

締切済

下記コードのHTMLをIE９で閲覧した際にブラウザの大きさをメディアクエリ以下の状態からメディアクエリ以上の大きさに拡げた際にクラッシュします。
td以外のタグでは大丈夫でした。
また、float、before:{content:""}のどちらかを削除した場合もクラッシュは起こりません。
beforeをafterにするとクラッシュは起こりません。
3個以上の行にした際に最後の行にbefore:{content:""}をつけるとクラッシュが起こります。

最終的には
|th|th|th|
|td1|td1|td1|
|td2|td2|td2|
をメディアクエリ以下のサイズにした際に
|th|td1|
|th|td1|
|th|td1|
|th|td2|
|th|td2|
|th|td2|
の形にするのが目的です。
うまく回避する方法があれば教えてください。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@media screen and (max-width:400px) {
td {
float:left;
}
td:nth-child(2)::before {
content:"before";
}
}
</style>
</head>
<body>
<table>
<tr><td>テスト１</td><td>テスト２</td></tr>
</table>
</body>
</html>

質問者からの補足コメント

  • 最終的には以下の形になるのが理想です。（IE９でブラウザ幅を拡大するとクラッシュします）
    @media screen and (max-width:400px) {
    thead {display:none;}
    td{float:left;}
    td:nth-child(1)::before {content:"ヘッダ１";}
    td:nth-child(2)::before {content:"ヘッダ２";}
    }

    <table>
    <thead>
    <tr><th>ヘッダ１</th><th>ヘッダ２</th></tr>
    </thead>
    <tbody>
    <tr><td>セル１－１</td><td>セル１－２</td></tr>
    <tr><td>セル２－１</td><td>セル２－２</td></tr>
    </tbody></table>

      補足日時：2015/12/19 16:06
    通報する

  • nth-child(2)のbeforeをafterにしてpositionで調整することにしました。

      補足日時：2015/12/21 16:35
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： zircon3
  • 回答日時：

本題と関係有りませんがWindows 7以上ではIE 9は来年（2016年）1月末でマイクロソフトのサポートが終了するのだったと思います。


Windows Vistaでのみ2017年4月までサポートがあるのだったと記憶します。

なので作成されているWebサイトの対象ブラウザにIE9を入れるかどうかも考えられるとよいように思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

vistaではまだサポートが続きますので、マイクロソフトがサポートを続ける限りは対応していきたいと思っています。
昔からIEには泣かされてきましたが、IE８以下に対応しなくなっただけでも余計なハックを書かずにすむようになってだいぶ助かってます。

通報する
お礼日時：2015/12/19 17:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報