为什么 Chrome 和 Firefox 呈现引导 CSS 与 Safari 不同答案

【问题标题】：Why Chrome & Firefox render bootstrap CSS different than Safari为什么 Chrome 和 Firefox 呈现引导 CSS 与 Safari 不同
【发布时间】：2015-02-26 05:46:49
【问题描述】：

我正在使用引导程序构建一个静态网站。在本地工作时布局看起来很好，当部署到网络时，Safari OK，但如果 Chrome 和 Firefox 似乎不支持多个引导 CSS 规则或者我做错了什么。

Safari 正常

铬 KO

实时代码：（确保接受证书） https://canales.paperplane.io/

代码（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Canales Auty</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>
  <div class="container">
    <!-- #Header -->
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10"><a href="index.html"><img src="img/header.png"></a></div>
      <div class="col-md-1"></div>
    </div>


    <!--Navbar-->
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
                <div class="navbar navbar-default">
          <div class="container">
            <div class= "navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>

            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li><a href="about.html">ABOUT THE FIRM</a></li>
                <li><a href="professionals.html">PROFESSIONALS</a></li>
                <li><a href="practice_areas.html">PRACTICE AREAS</a></li>
                <li><a href="news.html">NEWS ROOM</a></li>
                <li><a href="careers.html">CAREERS</a></li>
                <li><a href="index.html">CONTACT US</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1"></div>
    </div>

    <!--Mosiaco -->
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-4">
          <img  id="d1" src="img/mosaico_1.png">
          <div class="contenthover container">
            <h3>Lut</h3>
              <p>Hola soy Lut!</p>
              <p><a href="#" class="btn btn-success mybutton">Lorem ipsum</a></p>
          </div>
      </div>
      <div class="col-md-3">
        <img  id="d2" src="img/mosaico_2.png">
          <div class="contenthover container">
            <h3>Lut</h3>
              <p>Hola soy 2!</p>
              <p><a href="#" class="btn btn-success mybutton">Lorem ipsum</a></p>
          </div>
        <img src="img/mosaico_3.png">
      </div>
      <div class="col-md-3"><img src="img/mosaico_4.png"><img src="img/mosaico_5.png"><img src="img/mosaico_6.png"></div>
      <div class="col-md-1"></div>
    </div>

    <div class="row">
      <div class="col-md-12 footer">
        <p>hola</p>
      </div>
    </div>

  </div>

     <script src="http://code.jquery.com/jquery.js"></script>
   <script src="js/bootstrap.js"></script>
    <script src="js/contentHover.js"></script>
   <script type="text/javascript">
    $('document').ready(function(){
      $('#myTootTip').tooltip();
      $('#myPopOver').popover();

      $('#d1').contenthover({
        overlay_background:'#000',
        overlay_opacity:0.8
        });

        $('#d2').contenthover({
        overlay_background:'#000',
        overlay_opacity:0.8
        });


    });
   </script>
</body>
</html>

【问题讨论】：

两个按钮应该放在哪里？您的 Safari 屏幕截图没有显示其中任何一个。
它们在鼠标悬停在“马赛克”上时出现。在 Safari 中查看实时站点 canales.paperplane.io。我认为问题与 jQuery 插件有关
你实际上并没有回答我的问题。我确实没有问他们什么时候出现。我问他们出现在哪里。我已经用 Chrome 查看了您的链接。除了碳水化合物和维生素，我不打算从苹果安装任何东西。与往常一样，当您让他人轻松提供帮助时，您会得到更好的帮助。

标签： javascript html css twitter-bootstrap google-chrome

【解决方案1】：

Chrome 不会在使用 https:// 打开的网页上加载非 SSL 脚本。

引用外部脚本的最佳方式是不指定协议。

如：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...    
<script src="//code.jquery.com/jquery.js"></script>

与//

因为您的 jQuery 等没有加载，所以网站正在崩溃。注意：您需要验证您的 CDN 将通过 https 提供文件。

【讨论】：

去吧，插件在更改脚本引用后现在可以工作了。现在无法加载文件，我不知道如何验证我的 CDN 是否可以通过 https 提供文件。我正在使用 github+paperplane。另外，现在我更改了脚本引用，它在本地不起作用，我怎样才能使它起作用？
我相信在本地打开文件（不使用本地 Web 服务器）会导致协议默认为 file://。这不会很好地工作。理想情况下，您应该在开发机器上设置本地 Web 服务器。