Drupal 7 浏览器特定 css答案

【问题标题】：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。布莱赫。谁想要那个？

【讨论】：