Условный CSS в CSS не работает - PullRequest
Новая
       1

Условный CSS в CSS не работает

0 голосов
/ 07 марта 2012

, поэтому у меня есть этот код CSS: 

.onetoone{
    position: relative;
    margin: 10px auto 5px;
    padding: 20px;
    width: 878px;
    [if ! IE] height: 1241px;
    [if IE] height: 241px;
    border: 1px solid #AAAAAA;
    behavior: url(PIE.htc);
}

Однако я не вижу никакой разной высоты на .onetoone в IE и Firefox, у них по-прежнему одинаковая высота 214 пикселей. Он должен иметь высоту 1232 пикселя в Firefox и высоту 241 пикселя в IE 8, верно?

Что я пропустил?

Спасибо за все ваши ответы.

Ответы [ 5 ]

2 голосов
/ 07 марта 2012

Вы прочитали файл использования?

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

@import "/media/css/c-css.php";

Согласно примеру с этого веб-сайта , это должно решить проблему. 

.onetoone{
    position: relative;
    margin: 10px auto 5px;
    padding: 20px;
    width: 878px;
    border: 1px solid #AAAAAA;
    behavior: url(PIE.htc);
}
[if !IE] .onetoone {
    height: 1241px;
}

[if IE] .onetoone {
    height: 241px;
}

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

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

<!--[if IE]>
   <style>
      .onetoone {
        height: 241px;
       }
   </style>
<![endif]-->

<!--[if !IE]>
   <style>
      .onetoone {
        height: 1241px;
       }
   </style>
<![endif]-->

Должно работать в любом случае.

Обновление

Вместо загрузки другого стиля, как тотв моем примере загрузите другой файл в конце после загрузки всех основных файлов CSS таким образом. 

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="fixforie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="fixforie6.css" />
<![endif]-->
1 голос
/ 24 января 2013

Я знаю, что на этот вопрос ответили в прошлом году, но я хотел бы указать на метод, который, кажется, не используется, хотя функциональность была записана в спецификации CSS2.1.(Более подробные сведения см. В модуле условных правил CSS уровня 3 ).

-

Метод IE заключался в следующем: 

<!--[if IE]>
<link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" />
<![endif]-->

Как описано в разделе Условные комментарии вики.

-

Другой упомянутый здесь метод заключается в использовании Условно-CSS , который кажется популярным, но я никогда не слышал об этом и не мог привести пример того, как его использовать, так что ссылка будет делать!(Sry ppl).

-

НОВЫЙ МЕТОД С ДЕКАБРЯ 2012 ГОДА:

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

@media print { #navigation { display: none; } }

(пример взят из спецификации). При печати панель навигации будет скрыта.Другим условным групповым правилом , которое вы можете определить, является, например, @SUPPORTS; 

@supports (box-shadow: 2px 2px 2px red)
{
box-shadow: 2px 2px 2px red;
}

, включающее такие операторы "и", "или" и "not", как; 

@supports ((box-shadow: 2px 2px 2px red) and (border-radius: 25px))
{
    box-shadow: 2px 2px 2px red;
    border-radius: 25px;
}

Это означает, что вместо тестирования клиентского браузера вы тестируете функции, доступные для CSS и стиля соответственно.К сожалению, вы не можете вложить другие at-правила (например, @import, которые можно использовать для импорта таблицы стилей, специфичной для браузера, в зависимости от наличия функции css).

Попробуйте!

0 голосов
/ 07 марта 2012

Наилучший подход - следовать шаблону HTML5 .

В своем HTML добавьте следующее вокруг вашего HTML-тега: 

<!--[if lt IE 7]> <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

Так что в вашем стилеВы можете легко указать версию ie со стандартными стилями: 

div.this_element { float:right; margin-top: 10px; }
lt-ie8 div.this_element { margin-top: 5px; }
0 голосов
/ 07 марта 2012

Вы можете добавить условное в класс: 

[if IE] .ie-height{  
    height: 241px;
}
0 голосов
/ 07 марта 2012

Вы можете загрузить другой файл CSS на своей HTML-странице, например: 

<!--[if lt IE 8]>
    <link rel="stylesheet" href="styles/ie8.css" type="text/css" media="screen" />
<![endif]-->
...