Question

我有几页在Mozilla和Chrome中运行良好但在IE8中运行不正常。使用respond.js可以解决大多数问题。但是，当有参数传递给页面时，问题表面（页面以移动模式显示;将整个页面宽度和导航栏折叠为图标栏）。但这只在编辑模式下发生（id作为参数传递）。

例如，我有一个用户注册页面，可以在两种模式下工作（新建和更新）。对于更新，它使用附加了用户详细信息的相同视图。

这是两条路线。第一个用于新模式，第二个用于编辑模式。

Route::get('test', function() {
return View::make('test');
});

Route::get('test/1', function() {
return View::make('test');
});

这是测试页面。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Main Layout">
  <link rel="stylesheet" href={ { asset( "/css/bootstrap.min.css") }} />
  <script src="/js/jquery-1.11.1.js"></script>
  <!--[if lt IE 9]>
        <script src="js/respond.min.js"></script>
        <![endif]-->
</head>

<body>
  <div class="wrap col-md-13">
    <!-- Wrap all page content here -->
    <nav>
      <div class="col-md-12">
        <div class="nav navbar" style="background-color:black;">
          <div class="navbar-header pull-left">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar" style="background-color:red;"></span>
              <span class="icon-bar" style="background-color:red;"></span>
              <span class="icon-bar" style="background-color:red;"></span>
            </button>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav pull-right">
              <li class="stft-menu-item"><a href="/">Home</a>
              </li>
              <li class="stft-menu-item"><a href="/">About</a>
              </li>
              <li class="stft-menu-item"><a href="/">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</body>
<script src="/js/bootstrap.min.js"></script>

</html>

现在，当我在新模式下使用第一条路线测试时，一切都很好。

http://localhost/test

但问题出现以下情况。

http://localhost/test/1

请输入任何内容？

Answer 1

<!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
<![endif]-->

这需要更改为/js/respond.min.js（请注意前导斜杠）。目前，当您查看http://localhost/test/1网址时，该文件参考将无效。或者，您可以（应该）使用{{ asset('js/respond.min.js') }}函数。 asset()函数将为您的文件生成正确的URL（就像您将其用于CSS文件一样）。

编辑：你也是两次链接到jQuery，这是不必要的，我假设只有其中一个引用正在工作。

保留这个（但将其移到<head></head>标记内：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

删除这一个：

<script src="/js/jquery-1.11.1.js"></script>

编辑2：为什么此更改可以解决问题？

有两种方法可以链接到文件（JS，CSS，图像，其他页面 - 无论哪种类型都无关紧要。）

绝对链接

e.g。 /js/respond.js或http://www.example.com/js/respond.js

前导斜杠告诉浏览器它是绝对链接，并且应使用完整URL作为链接的基础生成链接。这允许您从域中任何URL的文件进行链接，并且它将知道目录是http://example.com/js/respond.js

您在所有网址上使用主要斜杠所带来的风险是它假定您的网站在域的根目录中运行。如果您将来将网站移动到子目录（可能是开发或暂存环境），那么您的链接将不再有效。这就是为什么使用asset()帮助器的好主意。此功能会在您的链接前面添加文件的完整路径asset('js/respond.js')将在所有网页上正确生成网址http://www.example.com/js/respond.js。

Bootstrap - Internet Explorer - 路由参数问题

1 个答案:

相关链接

绝对链接