javascript dom 注入元素不会在 IE 中拾取 css 样式

发布于 2024-08-25 11:22:00 字数 1657 浏览 8 评论 0原文

我遇到了一个奇怪的问题，在 javascript 注入一些 dom 元素之后，IE7 中不遵守为这些元素定义的 css 规则（即：这些元素的样式不会发生）。（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-styling？嗯，只是在这里猜测..

谢谢。

原文

I'm having the weird problem that after having javascript inject some dom-elements the css-rules defined for those elements are not obeyed in IE7(i.e: styling for these elements doesn't happen). (firefox and chrome work fine, others not tested)

Things I tried:
- cleared the cache
- no other css-rule takes precedence (no 'more-specific' styles, etc. )

the JS (in the body) (I used prototype for the injection here, but I don't think its related) (ABout the Js: some Jsonp trickery adding photos to a div based on latitude/longitude)

<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 (to be sure, added as last styles in 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;
}

Anyone knows what's up?
perhaps css doesn't do a 're-run' of css-styling after the dom is updated automatically? hmm, just guessing here..

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三寸金莲 2024-09-01 11:22:00

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

代替使用

div.className = 'pano_img_cont'

。

IE 的 setAttribute 实现是有效的：

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

...只要属性名称和 DOM 属性名称相同就可以。然而，class是JS中的保留关键字，因此该属性被称为className。这在 IE 中会中断。

如果直接设置该属性，则它在任何地方都有效。

setAttribute is broken in IE7 and lower.

Use

div.className = 'pano_img_cont'

instead.

IE's implementation of setAttribute is effectively:

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

… which is fine so long as the attribute name and the DOM property name are the same. class, however, is a reserved keyword in JS so the property is called className instead. This breaks in IE.

If you set the property directly, it works everywhere.

回复收藏 0 原文