Дочерние селекторы CSS в таблицах IE7 - PullRequest
Новая
       15

Дочерние селекторы CSS в таблицах IE7

4 голосов
/ 05 мая 2010

Я пытаюсь использовать> дочерний селектор CSS в IE7, и, похоже, он не работает. У меня есть вложенные таблицы. Моя внешняя таблица имеет имя класса «mytable», и я хочу, чтобы значения td внешней таблицы показывали границы. Я не хочу, чтобы у внутренней таблицы были границы.

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

.mytable { border-style: solid }
.mytable>tr>td { border-style: solid }

Но вторая строка, похоже, не имеет никакого эффекта. Если я изменю вторую строку, чтобы сделать ее менее конкретной, она применяется ко всем тд - я вижу слишком много границ. 

td { border-style: solid }

Так что я думаю, что это действительно проблема с селекторами. Страницы типа this предполагают, что IE7 должен иметь возможность делать то, что я хочу. Я что-то делаю глупо?

Вот весь HTML-файл: 

<html>
  <head>
    <style type="text/css">
      .mytable { border-style: solid; border-collapse: collapse;}
      td { border-style: solid; }
    </style>
  </head>

  <body>
    <table class="mytable">
      <tr>
        <td>Outer top-left</td>
        <td>Outer top-right</td>
      </tr>
      <tr>
        <td>Outer bottom-left</td>
        <td>
          <table>
            <tr>
              <td>Inner top-left</td>
              <td>Inner top-right</td>
            </tr>
            <tr>
              <td>Inner bottom-left</td>
              <td>Inner bottom-right</td>
            </tr>
          <table>
        </td>
      </tr>
    <table>
  </body>
</html>

Ответы [ 5 ]

5 голосов
/ 21 июля 2010

Помимо использования режима, соответствующего стандартам, вы должны написать 

.mytable>tbody>tr>td

потому что - даже если это не написано явно - в DOM есть элемент tbody между table и tr.

3 голосов
/ 05 мая 2010

Согласно нескольким источникам, дочерний селектор (>) должен работать в IE7.Вы можете обойти проблему, используя селектор-потомок (пробел) и изменив стиль для всех более глубоко вложенных элементов: 

.mytable { border-style: solid; border-collapse: collapse;}
.mytable tr td { border-style: solid; }
.mytable tr td td{ border-style: none; }
2 голосов
/ 11 апреля 2012

На самом деле, возможно, ваш код может не содержать элемент "tbody", но он все еще там.

Правильный селектор CSS будет: 

.mytable > tbody > tr > td { border-style: solid }
1 голос
/ 03 марта 2011

Также стоит отметить, что если ваш тип документа не задан, возможно, вы также столкнулись с этой проблемой.Убедитесь, что у вас есть тип документа в строке 1. У меня был HTML-комментарий в строке 1 прямо над типом документа, и это вызвало сбой IE7.

Работает: 

<!doctype html>

Не работает: 

<!-- Comment -->
<!doctype html>
1 голос
/ 05 мая 2010

если с помощью: '.mytable>tr>td' вы хотите сказать "td, который является дочерним по отношению к tr, который является дочерним по отношению к .mytable", то вам вообще не нужен>

Вы пробовали это без? 

.mytable tr td {}

должен делать то, что вы ищете (если я правильно понимаю ваш вопрос)

...