【问题标题】:Drupal 7 Browser specific cssDrupal 7 浏览器特定 css
【发布时间】:2011-08-18 11:53:42
【问题描述】:

如何在 Drupal 7 中拥有特定于浏览器的 CSS。如果浏览器是 chrome ,我想加载 chrome.css 。请帮忙

【问题讨论】:

  • 除了 IE
  • @Spudley : 我只需要 chrome 浏览器特定的 css
  • 真的吗?有什么特别的功能?
  • @Spudley :我已将 left:100px 设置为 css 元素。在 IE 8 和 firefox 4 中对齐是完美的,但在 chrome 中我必须设置 left:350px
  • 这听起来很奇怪。 Chrome 具有出色的标准合规性,所以我很惊讶听到像基本定位这样基本的东西如此糟糕。我怀疑还有更多的东西。样式表中的一些其他错误需要修复。我会建议您寻找问题的原因,而不是尝试通过破解来修复症状。如果实在找不到,请在此处向我们展示代码(可能最好在新问题中使用),我相信有人会很快指出。

标签: drupal drupal-6 drupal-modules drupal-7 browser-detection


【解决方案1】:

您可以在 template.php 文件中使用 preprocess_html 主题挂钩和 drupal_add_css 函数来执行此操作。

您会在 drupal 7 主题中找到示例,例如在 bartik 中:

// Add conditional stylesheets for IE
drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
drupal_add_css(path_to_theme() . '/css/ie6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 6', '!IE' => FALSE), 'preprocess' => FALSE));

编辑:由于 chrome 没有 条件 cmets,您可以检查 $_SERVER['HTTP_USER_AGENT'] :

if (isset($_SERVER['HTTP_USER_AGENT'])
    && stripos($_SERVER['HTTP_USER_AGENT'], 'chrome')!==false) {
    drupal_add_css( ... );
}

但在此之前,尝试修复您的 CSS 规则

【讨论】:

  • 但是就像 Spudley 说的,在这样做之前你应该尝试修复你的 css 规则
  • 它为 IE 添加了条件 css 我如何为 chrome 做呢?
  • 好吧,既然 chrome 没有条件 cmets,你只需要检查 $_SERVER['HTTP_USER_AGENT']
【解决方案2】:

我同意之前的发言者的观点,您绝对应该尝试更改您的 css,以便不需要浏览器特定的代码,但如果您确实需要针对 Webkit 浏览器(Chrome 和 Safari),您可以查看以下解决方案:

http://www.evotech.net/blog/2010/04/hack-for-webkit-filter-for-chrome-and-safari/

它不是 Drupal 特有的,而是一种普遍接受的针对 webkit 的方式,以防万一。

【讨论】:

    【解决方案3】:

    我推荐使用Conditional Stylesheets module

    Internet Explorer 实现了一项名为 有条件的评论。虽然 Web 开发人员对技术不屑一顾 不支持跨浏览器,许多 CSS 开发人员发现 条件注释非常有用。他们可以在他们的 普通样式表,并且可以通过放置来修复 IE 中损坏的渲染 条件 cmets 内仅 IE 的 CSS;这种技术甚至 微软推荐。 如果没有这个模块,唯一的方法就是拥有 IE 条件样式表 是添加 37 行代码(如果你想添加多个 样式表)在四个非常难以记住的函数调用中 你的主题的template.php。布莱赫。谁想要那个?

    【讨论】:

      猜你喜欢
      • 2011-12-21
      • 1970-01-01
      • 2014-07-16
      • 2020-06-21
      • 1970-01-01
      • 2011-10-16
      • 2015-11-20
      • 2012-05-05
      • 2018-07-30
      相关资源
      最近更新 更多