如何将 Internet Explorer 特定样式表排入 Wordpress 函数文件夹中？

Question

我在将我的 Wordpress 主题设置为受 Internet Explorer 上的早期版本支持时遇到了困难。我在网上找到的大多数教程都指示我在我的标题中加入 IE 特定的样式表，这在我尝试时不起作用，而且我也不愿意这样做，因为我已经读到这是一份工作这应该在函数文件夹中完成。

我已经在函数文件夹中加入了我当前的样式表。我只有两个——我的主要 style.css 和另一个用于具有透明标题的不同页面模板。我已经开始为这些页面模板中的每一个创建单独的样式表，以进行一些微调并删除 Internet Explorer 8 及以下版本不支持的所有内容。

所以我的问题如下：

1) 根据我下面的代码，有没有办法让我的主题检测是否正在使用早期版本的 Internet Explorer，如果是这种情况，让它将任何 I.E 样式表排入队列？我看过一些声称能够做到这一点的教程，但它们看起来与下面的代码完全不同，而且我的知识不够重写它。

2) 我提到我要为 Internet Explorer 配置两个不同的页面模板（包括 page.php）。它们都有自己的样式表，因为它们之间存在一些显着差异。如何让我的函数文件夹检测已为每个页面模板排入队列的样式表，然后让它检测是否正在使用 Internet Explorer，然后将正确的排入队列以覆盖它？ （我可能完全不了解我的逻辑，但据我所知，这就是该过程的工作方式）

3) 如果我为 Internet Explorer 覆盖我现有的 CSS，是否可以只覆盖我的 I.E 样式表中的必要规则？我的意思是，与其重写整个事情，我可以让我的主题首先查看原始样式表，然后读取我覆盖的与原始样式表不兼容的规则。

例如，如果我的布局中有一个对象设置为display:flex，那么 I.E 8 显然无法处理它，但其余代码可能没问题。因此，如果我要在我的 IE 8 样式表中将该对象设置为 display:inline-block，是否还需要编写其余代码？

这是我的代码，请原谅注释 - 当我试图查看是什么时，它们真的只是为了我的利益。我也包含了 javascript 队列，因为由于某种原因，如果我删除它们，它也不会接受我的样式表。

/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
function lucieaverillphotography_scripts() {

    /* JAVASCRIPT ----------- */

    wp_enqueue_script(
        'lucieaverillphotography-menu-toggle',
        get_template_directory_uri().
        '/js/menu-toggle.js');

    wp_enqueue_script(
        'lucieaverillphotography-add-submenu',
        get_template_directory_uri().
        '/js/add-submenu.js');

    /* END JAVASCRIPT ----------- */

    /* PAGE TEMPLATE STYLESHEETS ----------- */

    if (is_page_template('page-templates/full-page.php')) {
        wp_enqueue_style('lucieaverillphotography-full-page',
            get_template_directory_uri().
            '/css/full-page.css');
    }

    /* END PAGE TEMPLATE STYLESHEETS ----------- */

    /* MAIN STYLESHEET ----------- */
    else {
        wp_enqueue_style('lucieaverillphotography_style', get_stylesheet_uri());
    }
}

/* END MAIN STYLESHEET ----------- */

add_action('wp_enqueue_scripts', 'lucieaverillphotography_scripts');

/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

我的标题：

<header class="header">
    <!-- LOGOS -->
    <a href="#">
        <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
        <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
    <!-- LOGOS -->
    <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
    <!-- HEADER NAVIGATION MENU -->
    <nav class="header-nav">
        <div class="menu-header-menu-container">
            <ul id="menu-header-menu" class="menu">
                <li id="menu-item-463">
                    <a href="#">WORK</a>
                    <ul class="sub-menu">
                        <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                        <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                        <li id="menu-item-478"><a href="#">MACRO</a></li>
                        <li id="menu-item-477"><a href="#">CITIES</a></li>
                        <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                        <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
                    </ul>
                </li>
                <li id="menu-item-10"><a href="#">ABOUT</a></li>
                <li id="menu-item-464"><a href="#">SHOP</a></li>
                <li id="menu-item-923">
                    <a href="#">SOCIAL</a>
                        <ul class="sub-menu">
                       <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                        <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                        <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
                    </ul>
                    </li>
                <li id="menu-item-14"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </nav>
</header>

更新：––––––––––––––––––––––––––––––––––––––––––––––––– –––––––––––––––––––––––––––––––––––

大卫，根据你的建议，我试过wp_enqueue_style('/css/ie8.css', 'get_stylesheet_directory_uri()', array('style.css') );

根据我在网上找到的教程，我也试了一下这个版本wp_enqueue_style( 'lucieaverillphotography-ie', get_stylesheet_directory_uri() . "/css/ie8.css", array( 'lucieaverillphotography' ) ); $wp_styles->add_data( 'lucieaverillphotography-ie', 'conditional', 'IE 8' );

我是否与其中任何一个接近？我在 CrossBrowserTesting.com 上尝试过，没有发现任何区别，所以我的 ie8.css 文件看起来没有被识别。

Answer 1

1. 您可以使用$_SERVER['HTTP_USER_AGENT']

&本页 http://www.useragentstring.com/pages/Internet%20Explorer/

&本页 http://www.phpliveregex.com/

创建与preg_match一起使用的正则表达式

例如

functions.php（最好在函数挂钩 wp_enqueue_scripts 中，除非呈现页面，否则您不想运行 preg match）

if(preg_match("/MSIE [23456789].0/",$_SERVER['HTTP_USER_AGENT']) ){
   wp_enqueue_style('whatever');
}

可以说您可以使用modernizer 而不是加载自定义样式表。您可能会丢失上面的一些数字以使功能稍快我怀疑访问您网站的任何人都有 IE

1. 显然，如果您想匹配特定版本的 IE，请从正则表达式中删除数字以适应

2. 是的，您可以先将常规样式表排入队列，然后将 dependency 参数设置为 wp enqueue 样式

wp_enqueue_style('iecss', 'uri', array('normalcss handle') )

但更简单的处理方法是修改你的 CSS 规则

.class{
   display: inline-block;
   display: flex;
}

如果显示 flex 失败，内联块将是应用的显示值（只要不被后来的样式或更高的特异性否决）