javascript にいくつかの dom 要素を挿入させた後、それらの要素に対して定義された css ルールが IE7 では守られないという奇妙な問題が発生しています (つまり、これらの要素のスタイリングは行われません)。(firefox と chrome は正常に動作しますが、その他はテストされていません)
私が試したこと: - キャッシュをクリア - 他の CSS ルールが優先されることはありません (「より具体的な」スタイルなどはありません)。
JS(本体内)(ここではインジェクションにプロトタイプを使用しましたが、関連しているとは思いません)(JSについて:緯度/経度に基づいてdivに写真を追加するJsonpのトリック)
<script type="text/javascript">
function ws_results(json) {
var div = document.createElement('div');
div.setAttribute('class', 'pano_img_cont');
var paras = $A(json.photos);
paras.each(function(para){
var img = document.createElement('img');
img.setAttribute('src', para.photo_file_url);
div.appendChild(img);
});
var cc = $('panaramio_anchor');
Element.insert(cc.up(),{top:div});
}
</script>
<script src="http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=public&from=0&to=15&minx=13.375&miny=52.4917&maxx=13.424999&maxy=52.541702&size=square&callback=ws_results" type="text/javascript"></script>
THE CSS (確かに、ie.css の最後のスタイルとして追加されました)
.pano_img_cont{
display:block;
float:left;
position:relative;
width:100%;
margin-left:6px;
margin-top:3px;
padding-right:5px;
margin-bottom:-18px;
white-space:normal;
padding:10px;
background:#f00;
}
.pano_img_cont img{
display:inline-block;
width:67px;
height:55px;
margin:0 3px 5px 3px;
background:#eee;
float:left;
}
何が起きているか知っている人はいますか?おそらく、dom が自動的に更新された後、css は css-styling の「再実行」を行いませんか? うーん、ここで推測するだけ..
ありがとう。