如何使用 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 Hack 的範例：

以上是如何使用 CSS 樣式針對特定瀏覽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！