IE9.js(ie7-js) は便利だが、画面表示後に変更された HTML（いわゆる DHTML・動的 HTML）に対してスタイルが適用されないことがある。
理由は単純で、主に擬似要素などブラウザが対応していないスタイルシートを javascript により適用しているためである。
javascript によるスタイル適用は画面ロード時の 1 回だけになり、後から変更された HTML に対しては何もできない。
そこで、スタイルを再適用させるための関数 IE7.recalc() が存在する。
IE9.js + DHTML でスタイルシートが適用されない場合は試してみる価値あり。
主に擬似要素を使ってるスタイルで有効。
理由は単純で、主に擬似要素などブラウザが対応していないスタイルシートを javascript により適用しているためである。
javascript によるスタイル適用は画面ロード時の 1 回だけになり、後から変更された HTML に対しては何もできない。
そこで、スタイルを再適用させるための関数 IE7.recalc() が存在する。
IE9.js + DHTML でスタイルシートが適用されない場合は試してみる価値あり。
主に擬似要素を使ってるスタイルで有効。
使用例
<html>
<head>
<style type="text/css">
div > div:first-child > span {
background-color: cyan;
}
</style>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var index = 0;
$('#add_dynamic').click(function(){
$('#dynamic').append('<div><span>' + (index++) + '</span></div>');
IE7.recalc();
});
});
</script>
</head>
<body>
<input type="button" id="add_dynamic" value="add" />
<div id="dynamic"></div>
</body>
</html>
0 件のコメント:
コメントを投稿