Question

我正在使用bootstrap构建一个静态网站。在本地工作布局看起来很好，当部署到网络上时，Safari OK，但Chrome和Firefox看起来好像他们不支持几个bootstrap CSS规则或者我做错了。

Safari OK enter image description here

Chrome KO enter image description here

实时代码:(确保接受证书） 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>

Answer 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提供文件。

为何选择Chrome＆amp; Firefox渲染与Safari不同的bootstrap CSS

1 个答案: