IE игнорирует проблему class = "" - PullRequest
Новая
       1

IE игнорирует проблему class = ""

2 голосов
/ 05 августа 2011

У меня есть сложная веб-страница (приложение JavaScript), где включенная таблица стилей содержит следующее правило: 

.floatleft {
  float: left;
  margin-right: 10px;
}

В этом сложном макете есть элемент DIV: 

<div class="floatleft" width="25%">

Моя проблема в том, что IE9 ( режим причуд ) игнорирует класс floatleft. Фактически, Firebug lite говорит: This element has no style rules..

Другие правила на странице работают нормально, и FireFox, Chrome показывают правильный макет.

Еще несколько идей:

  • Это не относится к float:left, так как border:1px solid red также не отображается.
  • Родитель родительского элемента DIV также имеет еще один атрибут class, который работает.
  • У вложенного потомка проблемного DIV также есть рабочий атрибут class.
  • Встроенный style="float:left" работает.
  • удаление атрибута width не помогает
  • полный код CSS доступен здесь: http://pastebin.com/1JAATMZD

К сожалению, я не могу воспроизвести проблему в упрощенном тестовом примере (на самом деле это же правило хорошо работает в другом приложении), и я не могу дать вам URL, чтобы увидеть проблему, поскольку это приложение с ограниченным доступом.

В любом случае, я был бы рад, если бы кто-нибудь дал мне еще один совет, как определить проблему. AFAIK Internet Explorer, как известно, иногда портит правила стиля.

1 Ответ

2 голосов
/ 27 ноября 2013

Я столкнулся с той же проблемой сегодня в IE7.

У меня есть элемент

, созданный в Javascript. Я хотел стилизовать его с помощью класса CSS, но обнаружил, что IE7 не применяет стиль для моего
.

(Если я создам

непосредственно в HTML без Javascript, IE7 будет правильно применять класс CSS к моему элементу). 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>::</title>
    <style type="text/css">
      .childDiv{background:red;padding:10px;color:yellow;}
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var parentDiv = document.createElement("div");
      parentDiv.setAttribute("id", "parentDiv");

      var childDiv = document.createElement("div");
      childDiv.setAttribute("class", "childDiv");
      childDiv.appendChild(document.createTextNode("Hello IE7!"));

      parentDiv.appendChild(childDiv);
      document.body.appendChild(parentDiv);
    </script>
  </body>
</html>

На самом деле я обнаружил, что setAttribute () работает очень плохо в IE7 , когда он используется для установки имени класса элемента.

Реальным решением для моего кода является использование свойства className вместо setAttribute (). 


childDiv.className = "childDiv";

Решение, которое я нашел до сих пор, состоит в использовании атрибута ID вместо Class: 


#childDiv{background:red;padding:10px;color:yellow;}

и 


childDiv.setAttribute("id", "childDiv");

или ссылаться на мой

, используя идентификатор родителя: 

#parentDiv div{background:red;padding:10px;color:yellow;}

...