Question

我很难将我的Wordpress主题设置为Internet Explorer上的早期版本支持。我在网上找到的大部分教程都指示我在我的标题中排列IE特定的样式表，当我尝试它时它没有工作，而且我不愿意这样做，因为我＆＃ 39;我读过它应该在函数文件夹中完成的工作。

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

所以我的问题如下：

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

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

3）如果我覆盖我现有的Internet Explorer的CSS，是否有可能只覆盖我的I.E样式表中的必要规则？我的意思是，我不是要重写整个事物，而是可以使我的主题首先看到原始样式表，然后读取我在原始样式表中不兼容的覆盖规则。

例如，如果我的布局中的对象设置为display:flex，那么I.E 8显然无法处理该问题，但其余代码可能没问题。因此，如果我在我的I.E 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

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

＆安培;这一页 http://www.useragentstring.com/pages/Internet%20Explorer/

＆安培;这一页 http://www.phpliveregex.com/

创建要与preg_match

e.g。

functions.php（最好在函数钩住wp_enqueue_scripts，你不想运行preg匹配，除非渲染页面）

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

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

显然，如果您想要匹配特定版本的IE，请从正则表达式中删除数字以适合
是的，您可以先排队常规样式表，然后在wp排队样式中设置dependency参数

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

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

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

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

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

1 个答案: