элементы, вставленные в javascript, не используют CSS-стилизацию в IE - PullRequest
Новая
       12

элементы, вставленные в javascript, не используют CSS-стилизацию в IE

2 голосов
/ 11 марта 2010

У меня странная проблема, заключающаяся в том, что после внедрения 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;
}

Кто-нибудь знает, что случилось? возможно, css не выполняет «повторный запуск» css-стилей после автоматического обновления dom? хм, просто угадай здесь ..

Спасибо.

Ответы [ 2 ]

6 голосов
/ 11 марта 2010

setAttribute не работает в IE7 и ниже.

Используйте 

div.className = 'pano_img_cont'

вместо.

Реализация setAttribute в IE эффективна: 

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

… что хорошо, если имя атрибута и имя свойства DOM совпадают. Однако class является зарезервированным ключевым словом в JS, поэтому свойство называется className. Это ломается в IE.

Если установить свойство напрямую, оно будет работать везде.

0 голосов
/ 11 марта 2010

Не используйте setAttribute, используйте метод jCuery addClass:

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

...