Fügen Sie verschiedene Stylesheets mithilfe von IE-Bedingungen in die Warteschlange ein

Ich möchte ein anderes CSS für IE 9 unten laden, also habe ich zwei Dateien: – style.css – ie.css

Ich habe diesen Code benutzt:

 style.css <!--  

und benutzte dies für IE

  

aber ich weiß nicht, wie man diese Bedingung verwendet, um style.css sowohl für Nicht-IE als auch für IE9 zu verwenden

Solutions Collecting From Web of "Fügen Sie verschiedene Stylesheets mithilfe von IE-Bedingungen in die Warteschlange ein"

Während die grundlegende Verwendung von CSS-IE-Bedingungen für WPSE off-topic ist, enthält WordPress eine Methode zum bedingten Einreihen von Stylesheets basierend auf CSS-IE-Bedingungen.

Zuerst müssen Sie die richtigen Bedingungen verwenden:

  

Zweitens sollten Sie dieses Stylesheet in der wp_enqueue_scripts functions.php über den in wp_enqueue_scripts Callback richtig wp_enqueue_scripts :

 < ?php function wpse48581_enqueue_ie_css() { // Register stylesheet wp_register_style( 'wpse45851-ie', get_template_directory_uri() . '/css/ie.css' ); // Apply IE conditionals $GLOBALS['wp_styles']->add_data( 'wpse45851-ie', 'conditional', 'lt IE 9' ); // Enqueue stylesheet wp_enqueue_style( 'wpse45851-ie' ); } add_action( 'wp_enqueue_scripts', 'wpse48581_enqueue_ie_css' ); ?> 

Bearbeiten

Basierend auf diesem Kommentar:

Aber ich möchte nur IE.CSS auf IE weniger als IE9 und style.css für IE9 und Nicht-IE-Browser verwenden

Dies ist eine nicht standardisierte Möglichkeit, Stylesheets für die IE-Unterstützung zu definieren, da sie den Kaskadenteil von CSS vollständig umgeht. Trotzdem ist es durchaus möglich. Verwenden Sie einfach die obige Methode, um style.css ebenfalls unter Verwendung der entsprechenden Bedingungen in die Warteschlange style.css . Zum Beispiel ist dies möglicherweise nicht der beste Ansatz, aber es wird funktionieren:

 < ?php function wpse48581_enqueue_ie_css() { // Register and enqueue lt IE9 stylesheet wp_register_style( 'wpse45851-ie', get_template_directory_uri() . '/css/ie.css' ); $GLOBALS['wp_styles']->add_data( 'wpse45851-ie', 'conditional', 'lt IE 9' ); wp_enqueue_style( 'wpse45851-ie' ); // Register and enqueue IE9 stylesheet wp_register_style( 'wpse45851-ie9', get_template_directory_uri() . '/style.css' ); $GLOBALS['wp_styles']->add_data( 'wpse45851-ie9', 'conditional', 'IE 9' ); wp_enqueue_style( 'wpse45851-ie9' ); // Register and enqueue default stylesheet // Note that we use the SAME style.css as above wp_register_style( 'wpse45851-default', get_template_directory_uri() . '/style.css' ); $GLOBALS['wp_styles']->add_data( 'wpse45851-default', 'conditional', '!IE' ); wp_enqueue_style( 'wpse45851-default' ); } add_action( 'wp_enqueue_scripts', 'wpse48581_enqueue_ie_css' ); ?> 

Vorbehalt : Das wird funktionieren , aber ich empfehle dringend, dass Sie Ihren Ansatz zu Ihren IE-spezifischen Stildeklarationen überdenken. Ihr Leben wird viel einfacher sein, wenn Sie immer Ihr Standard-Stylesheet verwenden und dann die Kaskade nutzen, um den Standard zu überschreiben , falls erforderlich.

Sie laden nicht verschiedene CSS-Dateien, Sie erstellen verschiedene classn. Fügen Sie diese function zu Ihrer functions.php :

 /** * HTML5 start tag + language attribute + conditional tags for IE Win * * @link http://paulirish.com/?p=88 * @param bool $print * @return void|string */ function t5_htmlstart( $print = TRUE ) { $out = '< !Doctype html>'; $wpclasses = join( ' ', get_body_class() ); $lang = t5_get_language_attributes(); $ies = array ( 6 => 'lte6 lte7 lte8' , 7 => 'lte7 lte8' , 8 => 'lte8' , 9 => '' ); foreach ( $ies as $n => $class ) { $out .= ""; } $out .= ""; $print and print $out; return $out; } /** * Returns the language attributes. * * Unobstrusive copy from the core. * Requires WP 3.0+ * * @param string $doctype The type of html document (xhtml|html). */ function t5_get_language_attributes( $doctype = 'html' ) { $output = is_rtl() ? 'dir="rtl"' : ''; if ( $lang = get_bloginfo( 'language' ) ) { $output .= ( ( get_option( 'html_type' ) != 'text/html' || $doctype == 'xhtml' ) ? ' xml:' : '') . 'lang="' . $lang . '"'; } return apply_filters( 'language_attributes', $output ); } 

In Ihrer header.php rufen Sie diese function auf, wo Sie den Doctype sehen wollen:

 < ?php t5_htmlstart() ?> 

Jetzt können Sie jeden einzelnen IE oder Gruppen davon in Ihrem Stylesheet adressieren:

 .lte8 #searchform div { height: 1.9em; } .ie7 .widget_search input { margin: -1px 0; padding: 5px 5px; } .ie9 .widget_search input { margin-left: -2px; } 

Aber die Möglichkeit, diesen Code in einem WordPress-Theme zu verwenden, macht es nicht magisch zum Thema. Ich werde es bereuen.