CSS дочерний селектор не работает на ie9 - PullRequest
Новая
       0

CSS дочерний селектор не работает на ie9

3 голосов
/ 17 мая 2011

У меня есть такая страница: 

<body>
<table width="100%">...</table>
<table width="100%">...</table>
<table width="100%">...</table>
<table width="100%">...</table>
</body>

Мне нужно сделать так, чтобы все эти таблицы имели ширину 85% и были центрированы по горизонтали на странице. было бы легко, если бы эта страница была одной страницей, но она должна работать на 100+ страницах, и единственное, что у них общего, - это файл таблицы стилей. так что мне нужно сделать это только с CSS. я не могу накрыть таблицы внутри div или использовать jquery.

я попробовал: 

body { text-align:center; }
body > table { text-align: left; margin: 0 auto; width: 85%; }

это отлично работает на Firefox и Google Chrome, но, похоже, не работает на ie9 (не тестировалось, но я уверен, что оно не будет работать с более ранними, т.е. версиями)

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

EDIT:

Тип страницы был таким: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

я изменил его на: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

и теперь он работает на ie9!

Обновленный вопрос: это возможно без изменения типа документа?

Ответы [ 2 ]

4 голосов
/ 17 мая 2011

Как говорит И Цзян, ваша декларация типа не верна. IE9, вероятно, не может понять, что с этим делать, поэтому бежит обратно и прячется в своей оболочке в режиме причуд, где он становится слепым по отношению к дочернему селектору (или становится 10 лет моложе ).

Самый простой и надежно рекомендуемый способ - изменить объявление типа документа, чтобы вернуть его в стандартный режим и применить правило: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

В противном случае вы можете попытаться отказаться от дочернего селектора и попытаться сбросить стили в остальных таблицах, используя любые стили по умолчанию, которые вы хотите: 

body { text-align:center; }
body table { text-align: left; margin: 0 auto; width: 85%; }
body * table { /* Styles for other tables */ }

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

1 голос
/ 17 мая 2011

Я собрал этот jsfiddle и похоже, что он работает на IE9:

http://jsfiddle.net/XFgLf/

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

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

...