Wie können bestimmte Browser mit CSS-Stilen gezielt angesprochen werden?

So zielen Sie mit CSS auf bestimmte Browser ab

Problemstellung:

Sie stoßen auf ein Szenario, in dem Sie bestimmte Browser implementieren müssen CSS-Stile abhängig vom Browser des Benutzers. Konkret möchten Sie den Abstand für das #container-Element in Internet Explorer, Mozilla und Chrome anpassen.

Mögliche Lösungen:

Es gibt mehrere Ansätze, die Sie wählen können um dies zu erreichen:

1. Browsererkennung mit PHP:

   • Verwenden Sie die get_browser()-Funktion von PHP, um den Browser des Benutzers zu erkennen und einen zu erstellen Dynamische CSS-Datei, die die spezifischen Stile für den erkannten Browser enthält.

2. CSS-Hacks:

   • Verwenden Sie CSS-Hacks zum Zielen bestimmte Browserversionen aufrufen und die gewünschten Stile anwenden. Um beispielsweise den Abstand für das Element #container in IE7 anzupassen, könnten Sie *:first-child html #container { padding: 5px; }.

3. Browser-Erkennung mit Plugins:

   • Installieren Sie ein Browser-Erkennungs-Plugin, das Klassen zum Dokumentkörper hinzufügt auf dem erkannten Browser. Sie können diese Klassen dann in Ihrem CSS verwenden, um die entsprechenden Stile anzuwenden.

Beispiel für die Verwendung von 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);
?>

Beispiel für die Verwendung von CSS-Hacks:

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

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

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

Das obige ist der detaillierte Inhalt vonWie können bestimmte Browser mit CSS-Stilen gezielt angesprochen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!