使用IE条件将不同的样式表排队

时间：2012-04-11 作者：Dave

我想为下面的IE 9加载不同的css，所以我有两个文件：-样式。css-ie.css

我使用了以下代码：

<!--[if !IE]> --> style.css <!-- <![endif]-->

并将此用于IE

<!--[if IE]>  ie.css <![endif]-->

但是我不知道如何使用这个条件来使用style.css 对于非IE和IE9

2 个回复

SO网友:Chip Bennett

虽然basic use of CSS IE conditionals 是off-topic 对于WPSE，WordPress确实包含了一种基于CSS IE条件的有条件排队样式表的方法。

首先，您需要使用正确的条件：

<!--[if lt IE 9]>  ie.css <![endif]-->

其次，你应该enqueue this stylesheet properly, 在里面functions.php, 通过连接到的回调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\' );
?>

根据此评论编辑：

但我只想在ie上使用ie.css，而不是IE9和样式。IE9和非IE浏览器的css

这实际上是定义IE支持的样式表的非标准方式，因为它完全绕过了cascading CSS的一部分。然而，这是完全可能的。只需使用上述方法排队style.css 此外，使用适当的条件。例如，这可能不是最好的方法，但它会起作用：

<?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\' );
?>

Caveat: 这将起作用，但我strongly recommend 重新考虑IE特定风格声明的方法。如果您总是使用默认样式表，然后在必要时利用级联来覆盖默认样式表，那么您的生活就会轻松得多。

SO网友:fuxia

您不会加载不同的CSS文件，而是创建不同的类。将此函数添加到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 .= "<!--[if IE $n]><html $lang class=\'ie ie$n $class lte9 $wpclasses\'><![endif]-->";
    }

    $out .= "<!--[if !IE]><!--><html $lang class=\'$wpclasses\'><!--<![endif]-->";

    $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 );
}

在您的header.php 在要查看Doctype的位置调用此函数：

<?php t5_htmlstart() ?>

现在，您可以在样式表中处理每个IE或每组IE：

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

但是，在WordPress主题中使用此代码的可能性并不能使其成为一个神奇的主题。我会后悔的。

结束

小码农CODE

使用IE条件将不同的样式表排队

相关推荐

Using OOP in themes