CSS-селектор для детей в таблицах IE7

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

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

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

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

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>

источник

2010-05-05 John

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

.mytable { border-style: solid; border-collapse: collapse;} 
.mytable tr td { border-style: solid; } 
.mytable tr td td{ border-style: none; }

источник

2010-05-05 04:06:24

Спасибо, Стивен. Я должен был добавить в свой первоначальный вопрос, что знаю об этой возможности.Детали gory: Я могу на самом деле иметь несколько таблиц, только некоторые из которых являются .mytable. Я хочу, чтобы .mytable td имел твердое тело в пограничном стиле, а все остальные имели пограничный стиль. Поэтому, хотя ваш ответ действительно решает проблему для моего небольшого примера (спасибо снова!), Это не совсем то, что я ищу. – John

В документации Microsoft (http://msdn.microsoft.com/en-us/library/aa358819%28v=VS.85%29.aspx) говорится, что браузер должен работать в стандартном режиме для детского комбинатора Работа. В каком режиме документа вы работаете на странице? –

FYI: В IE7 вы можете вызвать «alert (document.compatMode)»; для отображения режима документа. Если он отображает «CSS1Compat», вы находитесь в стандартном режиме. «BackCompat» отображается для режима quirks. –

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

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

.mytable tr td {}

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

источник

2010-05-05 03:54:45

Благодаря J-man86, но с использованием пространства позволяет тд быть любой потомок (ребенок, внук, правнук и т.д.), а не точно ребенок. Таким образом, ваше предложение будет применяться к * all * td, которые находятся где-то под .mytable. – John

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

.mytable>tbody>tr>td

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

источник

2010-07-21 14:54:26 bbuser

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

работы:

<!doctype html>

не работает:

<!-- Comment --> 
<!doctype html>

источник

2011-03-03 18:32:18 Fostah

На самом деле, его можно, ваш код не может содержать элемент "TBODY", но его до сих пор там.

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

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

источник

2012-04-11 13:29:55 caroen

CSS-селектор для детей в таблицах IE7

ответ

Смежные вопросы