Jump to content
  • 0

Условные комментарии в IE

Clayton

Asked by Clayton,

 Share

Question

Clayton Explorer

Clayton

Posted
Posted

Не получается добавить для IE отдельный стиль, делаю примерно так:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
</head>

IE на него просто не реагирует... Где ошибся?))

Кстати вот так работает:

*+html #subtop{	   /* 7-й IE */
padding-top:5px;
}
* html #subtop{	   /* 6-й IE */
padding-top:5px;
}

Однако хотелось просто одно общее свойство для всех IE создать...

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
Быколай Explorer

Быколай

Posted
Posted
Не получается добавить для IE отдельный стиль, делаю примерно так:

Слово "примерно" смущает :)

По коду: прям как в книжке...

Кроме кода ошибка м.б. в путях, регистре, самом ксс.

Link to comment
Share on other sites
  • 0
Clayton Explorer

Clayton

Posted
  • Author
Posted (edited)

Мне не совсем понятно, как переопределение проходит?

Если я добавляю в заголовок страницы параметр:

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

При этом в заголовке присутствует так же ссылка на стандартный файл ксс - эксплорер будет реагировать только на стили файла только из вышеуказанного параметра, или будет реагировать только на измененный к примеру класс, в файле ксс для IE? Т.е. я это к чему. В ксс для IE нужно указывать все параметры, либо только те которые нужно переопределить?

Edited by Clayton
Link to comment
Share on other sites
  • 0
Быколай Explorer

Быколай

Posted
Posted

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

<!-- IE должен понять что это не ЕМУ;) :-->
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endIF]-->


<!--IE должен схавать: -->
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endIE]-->
</head>

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted (edited)

условные комментарии читаются только IE и чтобы вы там не написали, для всех кроме IE это просто комментарии и они ни на что не влияют. Так что конструкция 

<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endIF]-->

ничего не даст.

Експлорер будет загружать все стили которые указаны в head. А в условных комментариях можно располагать что угодно, но это будет читаться только IE, и подгрузка стилей в комментариях будет перекрывать только те, которые совпадают с общими. Кстати условные комментарии могут располагаться в любом месте кода, не обязательно в head. И содержимое этих комментариев будет срабатывать, соответственно там, где они располагаются.

Вобщем, логичнее написать общий стиль, а в условных комментариях только корректировать то, что неправильно понимает IE.

Edited by Searcher
Link to comment
Share on other sites
  • 0
Clayton Explorer

Clayton

Posted
  • Author
Posted

:)

Уже не знаю что не так тогда...

Вот простые коды:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<!--[if IE]>
  <link  href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="other">testing</div>
</body>
</html>

/* Это общий файл CSS, к примеру с рамкой, - style.css - и с верхним отсупом в 100px */
#other {
margin-top:100px;
background-color:#CCCCCC;
border:solid 1px;
border-color:#660000;
width:500px;
height:auto;
padding-left:10px;
}

/* А это файл переопределения для IE, - ie.css - без рамки и c отступом в 50px */
#other {
margin-top:50px;
}

Вот. Ошибок с путями как бы быть не может, ведь свалено все в одну папку, только опять же грю, IE на этот коммент не реагирует, показывает стили с общего css. Ума не приложу что не так...

Link to comment
Share on other sites
  • 0
Быколай Explorer

Быколай

Posted
Posted (edited)
ничего не даст.

Действительно... был не прав :)

Clayton, вы не правы говоря что

IE на этот коммент не реагирует, показывает стили с общего css. Ума не приложу что не так..

Он реагирует. попробуйте добавить в ie.css свойство, ну например color: {red}, то чего нет в общем ксс. похоже надо указывать все свойства/стили, а то он берёт недостающие из общего файла. попробуйте обнулить или переоределить всё что есть в style.css

И второе, тож важное:

закоментированный стиль для ие указывайте после обычного!

зы: тестил на 7.

Edited by Быколай
Link to comment
Share on other sites
  • 0
Clayton Explorer

Clayton

Posted
  • Author
Posted
Действительно... был не прав :)

Clayton, вы не правы говоря что

Он реагирует. попробуйте добавить в ie.css свойство, ну например color: {red}, то чего нет в общем ксс. похоже надо указывать все свойства/стили, а то он берёт недостающие из общего файла. попробуйте обнулить или переоределить всё что есть в style.css

И второе, тож важное:

закоментированный стиль для ие указывайте после обычного!

зы: тестил на 7.

Класс! И всего-то надо было порядок стилей поменять! Не думал никак что это уж прям так критически важно, ни в одной статье о б этом не было упоминания. Огромное спасибо!

p.s. И на 7-м и на 6-м работает, если использовать комментарий для всех ie браузеров.

Link to comment
Share on other sites
  • 0
Clayton Explorer

Clayton

Posted
  • Author
Posted (edited)

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

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

	<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>

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

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="http://site.ru/wp-content/themes/name/ie.css" />
<![endif]-->

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

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" />
<![endif]-->

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

Edited by Clayton
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

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

Имхо, это из общей логики вытекает. Браузер смотрит, какие стили ему доступны, и применяет их в порядке "живой очереди": встретил новое правило для знакомого селектора — прежнее забыл. Просто в варианте с условными комментами IE видит два источника стилей (общий для всех и "свой личный"), а другие браузеры — лишь один...

Link to comment
Share on other sites
  • 0
Быколай Explorer

Быколай

Posted
Posted

2Clayton не за что :)

Имхо, это из общей логики вытекает. Браузер смотрит, какие стили ему доступны, и применяет их в порядке "живой очереди": встретил новое правило для знакомого селектора — прежнее забыл. Просто в варианте с условными комментами IE видит два источника стилей (общий для всех и "свой личный"), а другие браузеры — лишь один...

В офф. мане css написано что для элемента используется тот стиль который указан "ближе всего" относительно этого элемента.

Я пользуюсь своими стилями для каждой страницы laugh.gif

:) нафигга?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept