Question

我创建了我的网站，作为二十三岁的儿童主题，Wordpress。我已经集成了Bootstrap，一切正常。除IE8外。页面一直停留在移动视图中。

我已按照Bootstraps页面上的说明操作，并在我的head-tag中包含了我的CSS后面的respond.js。我还包括了html5shiv。但它仍然是相同的，页面是100％宽度和所有一列。

我也尝试将http-equiv设置为x-ua-compatible。我的头标看起来像这样：

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <?php wp_head(); ?>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/respond.min.js"></script>
    <![endif]-->
</head>

我的LESS样式表就是这样开始的：

我知道响应对使用@import导入的CSS不起作用，但第一次导入中的CSS不需要由respond.js操纵，并且Bootstrap-import是一个LESS导入，因此产生的CSS将整个引导程序与我自己的引导程序放在同一个文件中。

/*
Theme Name:     Public Web
Description:    Public Web theme, responsive and HTML5 compatible
Author:         Me
Author URI:     http://stinaq.me
Template:       twentythirteen
Version:        1.0.0
*/

@import url("../twentythirteen/style.css");
@import "bootstrap/bootstrap-min.less";

我已经尝试了缩小版本的Bootstrap以及常规版本和IE浏览器（来自兼容模式和真正的IE8。浏览器找到了respond.js，因此也不能。） / p>

编辑：

我在本地XAMPP服务器上运行该站点，因此不会尝试通过//文件访问respond.js，而是尝试localhost

Answer 1

我在wordpress中使用bootstrap 3时遇到了类似的问题。它适用于IE8及更低版本的所有浏览器。媒体查询不再有效。今天我想出了发生了什么。这是一个@import问题。我将所有CSS文件直接包含在头文件中，如下所示。

代码：

<link href="<?php bloginfo('template_url');?>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

现在工作正常。

Answer 2

似乎错误完全不同。我之前遇到的另一个问题与检查器中未正确显示的html有关。当我从头开始重新创建文件时，它突然起作用了。那次我使用Sublime而不是Visual Studio创建文件，所以看起来编码不正确。更多信息：https://wordpress.stackexchange.com/users/43535/squ

Bootstrap响应性无法在wordpress网站上的ie8中运行

2 个答案: