Это ошибка IE? `body.foo.bar .container` применяется к каждому элементу тела - PullRequest
Новая
       9

Это ошибка IE? `body.foo.bar .container` применяется к каждому элементу тела

1 голос
/ 30 ноября 2009

У меня есть несколько страниц и одна таблица стилей. Тела страницы получают два класса: их имя и язык. Например: 

<body class="contact english">

Теперь в таблице стилей у меня есть специальное правило для немецкой версии страницы "экспертизы": 

 body.expertise.deutsch .container
  {
    width: 590px;
  }

В IE 6, 7, и 8 этот стиль последовательно применяется не только к 

<body class="expertise deutsch">

но каждый элемент тела на каждой странице .

Когда я снимаю «тело»: 

.expertise.deutsch .container
  {
    width: 590px;
  }

работает как задумано и относится только к «экспертизе немецких».

Я ненормальный? Слепой? С видом на очевидное?

Это предполагаемое поведение, известная ошибка или нет?

Я не могу найти ничего, кроме того, что в IE 8 IE должен обрабатывать несколько селекторов.

Поскольку это было неправильно понято: «Каждый элемент тела», конечно, относится к отдельным элементам тела на отдельных страницах, которые содержат одну и ту же таблицу стилей.

Ответы [ 5 ]

5 голосов
/ 30 ноября 2009

Насколько я понимаю, IE6 не понимает разницы между body.expertise.deutsch и body.deutsch. Он поднимает только последний класс в цепочке. Райан Брилл имеет больше информации здесь .

Я не уверен, что IE7 или 8 исправили это, но если они это сделали, вам, вероятно, придется работать в стандартном режиме, чтобы это работало (самый простой способ - включить строгий или HTML5-тип документа в верхней части документа ).

1 голос
/ 30 ноября 2009

Я протестировал ваш пример в ie7, но не могу воспроизвести ваши выводы: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      .container{
        height: 200px;
        background-color: red;
      }
      body.expertise.deutsch .container {
        background-color: blue;
      }
    </style>
</head>
<body class="expertise english">
<div class="container">
</div>
</body>
</html>

Показывает красный div, как и должно быть. И когда вы меняете второй класс тела с английского на немецкий, div становится синим.

Единственный браузер, который должен иметь проблемы с этим кодом, это ie6, так как он не понимает несколько классов в css и применяет только последний (который будет окрашивать страницу в синий цвет, если применяется только класс deutsch)

Не уверен ...

1 голос
/ 30 ноября 2009

Вы можете разместить всю свою таблицу стилей и разметку где-нибудь. Полагаю, у вас есть недопустимые утверждения и в других местах, а некоторые странно применяются. Вы можете также подтвердить свои CSS и разметку: http://jigsaw.w3.org/css-validator/.

Проверьте эту ссылку тоже. Похоже, что некоторые IE попали туда: http://www.ryanbrill.com/archives/multiple-classes-in-ie/

0 голосов
/ 30 ноября 2009

На самом деле тег body имеет два отдельных класса, примененных к нему в вашем коде, они не объединены как один, а находятся на одной и той же глубине. 

body.expertise
body.deutsch

Так твой код ... 

body.expertise.deutsch .container
  {
    width: 590px;
  }

Будет работать только если класс: 

<body class="expertise.deutsch">

Я немного неуверен в том, чтобы хорошо поработать в это время для вашей проблемы ...

Вы можете проверить, являются ли они какими-либо другими уникальными идентификаторами классов, на которые вы можете положиться, чтобы сузить css.

В конечном итоге это больше головной боли, чем стоит использовать несколько классов на элемент, если вы можете избежать этого. Я обычно настраиваю свои страницы как <body><div id="body"> </div></body>, поэтому у меня есть второй внешний контейнер для игры по css по таким причинам.

0 голосов
/ 30 ноября 2009

каждый элемент тела на каждой странице.

То есть у вас есть несколько элементов тела на странице? Это не нормально Трудно сказать, не видя HTML, но нужно помнить, что body.expertise.deutsch .container не является непосредственным дочерним селектором. Итак, представьте какой-нибудь HTML-код, как этот (я думаю): 

<body class="expertise esperanto">
    <div class="container">I'm 590px wide</div>

    <body>
        <div class="container">I'm also 590px wide</div>
    </body>
</body>

Поскольку у контейнера есть некоторый родительский (хотя и удаленный) класс «экспертиза эсперанто», он выбирает стиль. Мой совет: не используйте несколько тегов тела на одной странице. Кроме того, если у вас есть два элемента .container и только один должен выбрать стиль, возможно, присвойте им разные классы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...