我遇到了一个奇怪的问题,即在 javascript 注入(inject)一些 dom 元素后,IE7 中不遵守为这些元素定义的 css 规则(即:这些元素的样式不会发生)。 (firefox和chrome工作正常,其他未测试)
我尝试过的事情: - 清除缓存 - 没有其他 css 规则优先(没有“更具体”的样式等)
JS(在正文中)(我在这里使用原型(prototype)进行注入(inject),但我不认为它相关)(关于 Js:一些 Jsonp 技巧根据纬度/经度将照片添加到 div)
<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>
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?嗯,只是在这里猜测..
谢谢。
最佳答案
setAttribute 在 IE7 及更低版本中被破坏。
使用
div.className = 'pano_img_cont'
相反。
IE 的 setAttribute 实现是有效的:
HTMLElement.prototype.setAttribute = function (attribute, value) {
this[attribute] = value;
}
...只要属性名称和 DOM 属性名称相同就可以。然而,class
是JS中的保留关键字,因此该属性被称为className
。这会在 IE 中中断。
如果直接设置该属性,则它在任何地方都有效。
关于javascript dom 注入(inject)元素不会在 IE 中拾取 css 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2424617/