Drupal - Zen Subtheme - 为非 Internet Explorer 浏览器指定样式表

发布于 2024-07-26 20:30:22 字数 2318 浏览 6 评论 0原文

在使用 Zen 子主题的 Drupal 6 上，我们的自定义样式表在除 Internet Explorer 7 之外的任何地方都很漂亮且完美。这似乎是 :hover 错误，我们将鼠标悬停在该错误上的任何链接都会导致主内容区域跳过左侧边栏（这叫边距折叠还是边距重置？）。

尝试在所有 :hover 和父元素上设置 min-height: 1%，但有太多人最终决定指定一个定义了零个悬停元素的“ie7specic.css”。 Internet Explorer 7 用户运气不佳。

但是，在 myspecialsub_theme.info 文件中，myspecialsub_theme.css 会自动发送到 Internet Explorer，从而创建 :hover 元素。我们需要指定 Internet Explorer 7 获取其特定 CSS，而所有其他浏览器获取常规 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 不起作用，我应该使用什么来代替？

或者对于所描述的问题有不同的解决方案吗？

更新：我的评论没有在下面很好地显示，这是我最终找到的解决方案：

解决方案感谢 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>

疯狂吧？

最终更新：最好的是，我终于发现了 Zen 子主题中 :hover bug 的根源。 div main 需要一个 zoom:1; 并且这些条件样式表都不是必需的。但如果你不能解决原来的问题，那你就去吧。

原文

On Drupal 6 using a Zen subtheme, our custom stylesheet is beautiful and perfect everywhere except in Internet Explorer 7. It appears to be the :hover bug, where any link we hover over causes the main content area to jump over the left sidebar (is that called margin collapse or margin reset?).

Tried setting min-height: 1% on all :hover and parent elements, but there are soooo many finally decided to specify an 'ie7specific.css' which has zero hover elements defined. Tough luck for Internet Explorer 7 users.

However, in the myspecialsub_theme.info file the myspecialsub_theme.css is automatically sent to Internet Explorer, therefore creating the :hover elements. We need to specify Internet Explorer 7 gets its specific CSS and all other browsers get the regular.

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

It works for Internet Explorer versions, but Firefox is not getting the stylesheet. Why isn't the !IE working, what should I use instead?

Or is there a different solution for the problem described?

UPDATE:
My comment did not display well below, here is the solution I finally found:

Solution thanks to wikipedia.org/wiki/Conditional_comment.

In the 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

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>

Crazy huh?

FINAL UPDATE: Best yet, I finally discovered the source of :hover bug in the Zen subtheme. The div main needs a zoom:1; and none of these conditional stylesheets are necessary. But there you go if you cannot solve the original problem.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

随遇而安 2024-08-02 20:30:22

更新：
刚刚意识到我可以回答自己的问题。不寻求声誉点，而是想为研究此问题的其他人澄清正确的解决方案。

解决方案感谢 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>

疯狂吧？

AAAAND 顺便说一句，最终修复了 IE7 中的悬停选择器/折叠边距错误，使用 drupal zen 主题，在 IE 中粘贴

javascript:alert(content.currentStyle.hasLayout)

到位置栏并按 Enter 键，会告诉我 id=content 元素是否有布局（true 或 false）。我不断用其他 id 名称（例如 main-inner、primary）替换内容，直到我发现 main div 是错误的。添加zoom:1的属性； ie7specic.css 解决了所有问题。

上帝保佑微软。

UPDATE:
Just realized I can answer my own questions. Not seeking reputation points, but want to clarify the right solution for anyone else looking into this.

Solution thanks to wikipedia.org/wiki/Conditional_comment

In the 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

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>

Crazy huh?

AAAAND btw finally fixed the hover selector/collapsing margin bug in IE7, using the drupal zen theme, in IE pasting

javascript:alert(content.currentStyle.hasLayout)

into the location bar and hitting enter, would tell me if the id=content element hasLayout (true or false). I kept replacing content with other id names like main-inner, primary, until I discovered main div was false. Adding a property of zoom:1; to that ie7specific.css cured all the problems.

God bless Microsoft.

回复收藏 0 原文

初与友歌 2024-08-02 20:30:22

！据我了解，IE 无法工作，因为只有 IE 支持条件样式表。

我处理这个问题的方法是在主样式表中定义其他浏览器内容，并根据需要在 IE 条件中覆盖。

您可以这样做：

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

当然，IE 特定的内容需要做额外的工作来覆盖任何原本不会导入的内容，但这就是使用 IE 所得到的。

!IE won't work as I understand it because only IE supports conditional stylesheets.

The way I handle this is to define the other browsers stuff in the main stylesheet and override as needed in the IE conditionals.

You could do this:

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

Of course the IE specific stuff will need to do extra work to override any stuff that wouldn't otherwise have been imported but thats what you get for using IE.

回复收藏 0 原文

尸血腥色 2024-08-02 20:30:22

你的条件语句需要像这样打印：

    <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 即可。

干杯!

Your conditional statement statements need to print like this:

    <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]-->

Remember to place the IE tag after your normal CSS so that you can over write the IE issues.

Also, I wouldn't wrap your main stylesheet in a conditional statement:

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

Just target IE7 with you first fix and be done.

Cheers!

回复收藏 0 原文

小红帽 2024-08-02 20:30:22

正如本所说，您应该尝试使用 .selector:hover{property:none} 覆盖 ie7specific.css 中的 :hover 选择器。确保匹配每个选择器并将每个属性设置为其常规值。如果仍然不起作用，我认为更简单的解决方法是将这些 :hover 或其他非 Internet Explorer 细节写入单独的文件中，并在检测浏览器后通过 JavaScript 加载它们。尝试http://docs.jquery.com/Utilities/jQuery.support。