Вопрос новичка CSS IE против Chrome - PullRequest
Новая
       41

Вопрос новичка CSS IE против Chrome

2 голосов
/ 21 апреля 2011

У меня есть таблица стилей, которая содержит 10 определений селектора. Когда я просматриваю свой веб-сайт в IE и Chrome (я не включаю FF, потому что он отображается точно так же, как в Chrome), девять из десяти определений селектора работают согласованно во всех браузерах.

То, что не работает, определяется так: 

a.dp-choose-date 
{
    /* border: 1px solid red; */
    float: right;
    width: 25px;
    height: 25px;
    padding-top: 5px;
    padding-left: 16px;
    position: relative;                  /* This is only needed for IE */
    top: -25px;                          /* This is only needed for IE */
    margin: 0px;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(../images/calendar3.png) no-repeat; 
}

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

Вверху моего документа у меня теперь есть следующее: 

<!--[if IE]>
<link href="Styles/custom.css" rel="stylesheet" type="text/css" />
<![endif]-->

<![if !IE]>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<![endif]>

который работает, но я не могу сделать условный оператор на уровне селектора?

Я также попробовал это в документе CSS, который также не работал. 

[if IE] a.dp-choose-date {
    /* definitions here */
}

У кого-нибудь есть предложения?

Ответы [ 4 ]

3 голосов
/ 21 апреля 2011

Один из способов сделать это: 

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="Styles/custom.css" rel="stylesheet" type="text/css" />

Обратите внимание, что у меня нет условия вокруг первой таблицы стилей.

Во второй таблице стилей просто определите тег как:

a.dp-choose-date   {
    position: relative; /* This is only needed for IE */
    top: -25px;   /* This is only needed for IE */
}

Благодаря работе таблиц стилей браузер объединяет и применяет оба определения.

1 голос
/ 21 апреля 2011

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

<!--[if lt IE 7]><html lang="en" class="ie6"><![endif]--> 
<!--[if IE 7]><html lang="en" class="ie7"><![endif]--> 
<!--[if IE 8]><html lang="en" class="ie8"><![endif]--> 
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->

Это позволяет вам добавлять префикс IE только к той версии IE, на которую вы хотите настроить таргетинг: 

a.dp-choose-date 
{
    /* border: 1px solid red; */
    float: right;
    width: 25px;
    height: 25px;
    padding-top: 5px;
    padding-left: 16px;
    margin: 0px;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(../images/calendar3.png) no-repeat; 
}

.ie6 a.dp-choose-date 
{
    position: relative;
    top: -25px;
}
0 голосов
/ 21 апреля 2011

Самый простой способ реализовать эту логику: 

[if IE] a.dp-choose-date {
 /* definitions here */
}

- использовать условные комментарии IE для записи уникальных тегов тела:

http://www.positioniseverything.net/articles/cc-plus.html

Таким образом, вы можете получить что-то вроде этого: 

<body class="ie7">

Затем в вашем CSS, когда вам нужно переопределить один стиль, вы можете сделать это: 

.myStyle {--style for good browsers--}
.ie7 .myStyle {over-ride for IE7}

Преимущества этого:

  • требуется загрузить только один файл CSS (сохранение запросов к серверу)
  • Ваш CSS остается действительным (без уродливых хаков CSS)
  • ваши стили отмены остаются с вашими хорошими стилями, так что намного легче поддерживать
0 голосов
/ 21 апреля 2011

Использование условных выражений IE * if на уровне HTML, вероятно, является наилучшим способом исправления изломов, которые имеет IE (обычно <9). Условные комментарии не существуют на уровне CSS. Вы также можете (если хотите) использовать <a href="http://www.webdevout.net/css-hacks" rel="nofollow"> CSS-хаки , но это, вероятно, не лучшее решение, поскольку более поздние версии IE не обязательно допускают такие хаки, но могут по-прежнему иметь те же проблемы с CSS.

Кстати, ваше второе if условие должно быть записано следующим образом для проверки: 

<!--[if !IE]>-->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
...