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

Question

我正在使用引导程序构建一个静态网站。 在本地上工作时，将Safari正常部署到Web时，布局看起来不错，但是Chrome和Firefox好像不支持几个引导CSS规则，或者我做错了。

Safari正常 在此处输入图片说明

铬铬在此处输入图片说明

实时代码：（确保接受证书） 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和Firefox呈现的引导CSS与Safari不同

问题描述

1 个解决方案

解决方案1
4 2014-12-30 03:55:05

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

问题描述

1 个解决方案

解决方案1 4 2014-12-30 03:55:05

解决方案1
4 2014-12-30 03:55:05