如何使用 CSS 样式针对特定浏览器？

如何使用 CSS 定位特定浏览器

问题陈述：

您遇到需要实现特定的场景CSS 样式取决于用户的浏览器。具体来说，您想要在 Internet Explorer、Mozilla 和 Chrome 中自定义 #container 元素的填充。

可能的解决方案：

您可以采取多种方法要实现此目的：

1. 使用 PHP 进行浏览器检测：

   • 使用 PHP 的 get_browser() 函数来检测用户的浏览器并创建一个包含检测到的浏览器的特定样式的动态 CSS 文件。

2. CSS 黑客：

   • 利用 CSS 黑客来定位特定的浏览器版本并应用所需的样式。例如，要调整 IE7 中 #container 元素的填充，您可以使用 *:first-child html #container { padding: 5px; }.

3. 使用插件进行浏览器检测：

   • 安装浏览器检测插件，根据文档正文添加类在检测到的浏览器上。然后，您可以在 CSS 中使用这些类来应用适当的样式。

使用 PHP 的示例：

<?php
$browser = get_browser();
switch ($browser['browser']) {
    case 'IE':
        $css = '.container { padding: 5px; }';
        break;
    case 'Mozilla':
        $css = '.container { padding: 7px; }';
        break;
    case 'Chrome':
        $css = '.container { padding: 9px; }';
        break;
}

file_put_contents('browser-specific.css', $css);
?>

使用 CSS Hack 的示例：

/* Target IE7 */
*:first-child+html #container { padding: 5px; }

/* Target Mozilla */
html>form #container { padding: 7px; }

/* Target Chrome */
html>**/*body #container { padding: 9px; }

以上是如何使用 CSS 样式针对特定浏览器？的详细内容。更多信息请关注PHP中文网其他相关文章！