2

我有一个奇怪的问题，在 javascript 注入一些 dom 元素后，为这些元素定义的 css 规则在 IE7 中没有被遵守（即：这些元素的样式不会发生）。（firefox 和 chrome 工作正常，其他未测试）

我尝试过的事情： - 清除缓存 - 没有其他 css 规则优先（没有“更具体”的样式等）

JS（在体内）（我在这里使用原型进行注入，但我认为它不相关）（关于 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&amp;set=public&amp;from=0&amp;to=15&amp;minx=13.375&amp;miny=52.4917&amp;maxx=13.424999&amp;maxy=52.541702&amp;size=square&amp;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 样式？嗯，这里只是猜测..

谢谢。

4

2 回答 2

6

setAttribute 在 IE7 及更低版本中被破坏。

采用

div.className = 'pano_img_cont'

反而。

IE 对 setAttribute 的实现是有效的：

HTMLElement.prototype.setAttribute = function (attribute, value) {
    this[attribute] = value;
}

…只要属性名称和 DOM 属性名称相同就可以了。class但是，它是 JS 中的保留关键字，因此会调用该属性className。这在 IE 中中断。

如果您直接设置该属性，它可以在任何地方工作。

于 2010-03-11T11:58:42.143 回答
0

不要使用 setAttribute，使用 jQuery 的 addClass 方法：

http://api.jquery.com/addClass/

于 2010-03-11T11:57:54.323 回答