Why Chrome & Firefox render bootstrap CSS different than Safari

Question

I am building a static web site with bootstrap. Working on local the layout looks fine, when deployed to the web, Safari OK, but Chrome and Firefox seem like if they dont support several bootstrap CSS rules or I am doing something wrong.

Safari OK 在此处输入图片说明

Chrome KO 在此处输入图片说明

Live code: (make sure to accept the certificate) https://canales.paperplane.io/

Code (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 won't load non-SSL scripts over a webpage open with https://.

The best way to reference your external scripts is to not specify the protocol.

As in:

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

with //

Because your jQuery etc. is not loading, the site is breaking. Note: you will need to verify that your CDN will serve the files over https.

Why Chrome & Firefox render bootstrap CSS different than Safari

Question

1 answers

solution1
4 2014-12-30 03:55:05

Why Chrome & Firefox render bootstrap CSS different than Safari

Question

1 answers

solution1 4 2014-12-30 03:55:05

solution1
4 2014-12-30 03:55:05