Drupal - Zen Subtheme - Укажите таблицы стилей для браузеров, не относящихся к Internet Explorer - PullRequest
Новая
       27

Drupal - Zen Subtheme - Укажите таблицы стилей для браузеров, не относящихся к Internet Explorer

2 голосов
/ 17 июля 2009

На Drupal 6, использующей подтему Zen, наша пользовательская таблица стилей прекрасна и совершенна везде, кроме Internet Explorer 7. Похоже, это ошибка :hover, когда любая ссылка, на которую мы наводим курсор, заставляет основную область контента перепрыгивать через левая боковая панель (называется ли это обрывом или сбросом поля?).

Пробная установка min-height: 1% для всех :hover и родительских элементов, но есть очень многие, наконец, решили указать 'ie7specific.css', в котором определены нулевые элементы наведения. Неудача для пользователей Internet Explorer 7.

Однако в файле myspecialsub_theme.info myspecialsub_theme.css автоматически отправляется в Internet Explorer, в результате чего создаются элементы :hover. Нам нужно указать, что Internet Explorer 7 получает свой конкретный CSS, а все остальные браузеры получают обычный. 

conditional-stylesheets[if gt IE 7][all][] = myspecialsub_theme.css
conditional-stylesheets[if IE 7][all][] = ie7specific.css
conditional-stylesheets[if lt IE 7][all][] = myspecialsub_theme.css
conditional-stylesheets[if !IE][all][] = myspecialsub_theme.css

Это работает для версий Internet Explorer, но Firefox не получает таблицу стилей. Почему не работает! IE, что я должен использовать вместо этого?

Или есть другое решение описанной проблемы?

UPDATE: Мой комментарий не отображался ниже, вот решение, которое я наконец нашел:

Решение благодаря wikipedia.org / wiki / Conditional_comment .

В subtheme.info: 

; stylesheets[all][] = specific_subtheme.css
conditional-stylesheets[if gt IE 7][all][] = specific_subtheme.css
conditional-stylesheets[if IE 7][all][] = ie7specific.css
conditional-stylesheets[if lt IE 7][all][] = specific_subtheme.css

В page.tpl.php: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
<head>
    <title><?php print $head_title; ?></title>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <?php print $head; ?>
    <?php print $styles; ?>
    <![if !IE]>
        <link href="/sites/all/themes/specific_subtheme/specific_subtheme.css" rel="stylesheet">
    <![endif]>
    <?php print $scripts; ?>
</head>

Сумасшедший, да?

ЗАКЛЮЧИТЕЛЬНОЕ ОБНОВЛЕНИЕ: Лучше всего я наконец обнаружил источник ошибки :hover в подтеме Zen. Для div main требуется zoom:1;, и ни одна из этих условных таблиц стилей не нужна. Но вы идете, если не можете решить исходную проблему.

Ответы [ 4 ]

2 голосов
/ 20 ноября 2009

UPDATE: Просто понял, что могу ответить на свои вопросы. Не ищите очки репутации, но хотите уточнить правильное решение для всех, кто занимается этим.

Решение благодаря wikipedia.org/wiki/Conditional_comment

В подтеме.инфо: 

; stylesheets[all][] = specific_subtheme.css
conditional-stylesheets[if gt IE 7][all][] = specific_subtheme.css
conditional-stylesheets[if IE 7][all][] = ie7specific.css
conditional-stylesheets[if lt IE 7][all][] = specific_subtheme.css

In page.tpl.php: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
<head>
<title><?php print $head_title; ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<?php print $head; ?>
<?php print $styles; ?>
<![if !IE]>
<link href="/sites/all/themes/specific_subtheme/specific_subtheme.css" rel="stylesheet">
<![endif]>
<?php print $scripts; ?>
</head>

Сумасшедший, да?

AAAAND, между прочим, исправлена ​​ошибка зависания селектора / спадающего поля в IE7 с использованием темы drupal zen в вставке IE 

javascript:alert(content.currentStyle.hasLayout)

в строке адреса и, нажав Enter, сообщит мне, имеет ли элемент id = content hasLayout (true или false). Я продолжал заменять контент другими идентификаторами, такими как main-inner, primary, пока не обнаружил, что main div было ложным. Добавление свойства увеличения: 1; к этому ie7specific.css вылечил все проблемы.

Боже, благослови Microsoft.

0 голосов
/ 22 июля 2009

Ваши условные операторы должны печататься так: 

    <link rel="stylesheet" href="/sites/all/themes/style.css" 
type="text/css" media="screen, projection">
    <!--[if IE 7]>
    <link rel="stylesheet" href="/sites/all/themes/ie7.css" 
type="text/css" media="screen, projection">
    <![endif]-->

Не забудьте разместить тег IE после обычного CSS, чтобы вы могли перезаписать проблемы с IE.

Кроме того, я бы не обернул вашу основную таблицу стилей в условное выражение: 

<!--[if !IE]><!-->
<h1>You are NOT using Internet Explorer</h1>
<!--<![endif]-->

Просто нацельтесь на IE7 с вашим первым исправлением и все готово.

Ура!

0 голосов
/ 10 ноября 2009

Как говорит Бен, попробуйте переопределить селектор :hover в ie7specific.css с помощью .selector:hover{property:none}. Удостоверьтесь, чтобы соответствовать каждому селектору и установить каждое свойство к его обычному значению. Если это все еще не работает, я думаю, что более легким решением будет записать эти :hover или другие особенности, отличные от Internet Explorer, в отдельный файл и загрузить их через JavaScript после обнаружения браузера. Попробуйте http://docs.jquery.com/Utilities/jQuery.support.

0 голосов
/ 18 июля 2009

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

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

Вы можете сделать это: 

 stylesheets[all][] = myspecialsub_theme.css
 conditional-stylesheets[if IE 7][all][] = ie7specific.css

Конечно, специфические для IE вещи должны будут выполнить дополнительную работу, чтобы переопределить любые вещи, которые иначе не были бы импортированы, но это то, что вы получаете за использование IE.

...