為什么我的網站在chrome和firefox中的外觀與使用flexbox的Safari中的外觀不同？

Question

我是HTML和CSS的新手，並且都具有非常基礎的知識。 我正在創建一個測試網站，並使用了部分來自Treehouse的教程。 我想使用flexbox進行布局。 我已經創建了網站，看起來就像我希望在智能手機上看到的那樣，它是一個單獨的列，但是當它移至iPad屏幕時，我希望底部的列變成2列，而在台式機或mbpro屏幕上我希望所有3列都顯示出來。

在chrome和firefox中，我的網站完全符合我的期望。 但是，在Safari中，該網站看起來不正確。 藍色的橫幅在桌面上向左偏移，底部的列在3中，但不成比例。 第一列很大，最后兩列很細。

我希望有人能夠幫助我朝正確的方向看。 我學習HTML和CSS已有兩周了，而且還不太熟練。 上個周末，我才剛剛第一次了解flexbox。 我希望最后一頁在智能手機上成為一欄。 然后在iPad上，我希望頂部的菜單在單列中，而公司名稱和營業時間等應在藍帶中居中。 然后將底部的列分為2，底部分為1。 然后在iPad Pro或台式機屏幕上，我希望與iPad一樣，除了最后一列分為3個相等的空格。

正如我已經說過的，這時我的chrome和firefox完全可以實現我想要的功能，只有Safari無法正常工作。

正確的頁面

使用Safari的頁面不正確

以下是HTML

    <!DOCTYPE html>
    <html>
      <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">                  <title>Name of Company</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/oilChangeStyles.css">

<div id="fb-root">
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
          fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
        </script>
</div>

</head>
   <body>


<header class="main-header">
    <h1 class="name"><a href="#">Name of business</a></h1>
        <ul class="main-nav">
            <li><a href="#">Oil changes</a></li>
            <li><a href="#">Trans flush</a></li>
            <li><a href="#">Trans tune ups</a></li>
            <li><a href="#">Coolant Services</a></li>
            <li><a href="#">4x4 services</a></li>
            <li><a href="#">Air filters</a></li>
        </ul><!-- .main-nav -->


</header><!-- .main-header -->   

<div class="banner">
    <div class="left-side col">
        <a href="tel:800-800-8000">(800) 800-8000</a><br />
        <a href="https://google.com"  target="_blank">1000 West Columbia Blvd<br />
                                                                            Ste 100<br />
                                                                Dearborn<br /> MI 45885</a>
    </div><!-- .left-side -->   
        <div class="center col">
            <h1 class="headline">Company name</h1>
            <span class="tagline">"Your one stop shop for all your auto needs."</span><br />
        </div><!-- center col -->
    <div class="right-side col">            
            Mon 8:30 am - 6:30 pm<br /> 
            Tue 8:30 am - 6:30 pm<br />     
            Wed 8:30 am - 6:30 pm<br />     
            Thu 8:30 am - 6:30 pm<br />     
            Fri 8:30 am - 6:30 pm<br />     
            Sat 8:30 am - 5:00 pm<br />     
            Sun Closed<br />    
    </div><!-- right-side col -->
</div><!--/.banner-->

<div class="pictures">
    <img class="item-1" src="img/frontOfBusiness.png" alt="Front of Business">
    <img class="item-2" src="img/logo.png" alt="Logo">
    <!-- <img class="item-3" src="img/interiorBay.png" alt="The interior bay">   -->
</div><!-- .pictures -->


<div class="row">   



    <div class="primary col">
        <h2>Welcome!</h2>


        <p>At Company name we pride ourselves in customer service and are always willing to go the extra mile to make our customers happy. Drop-ins are always welcome for our wide variety of auto care services. Stop in anytime and talk to our friendly techs about the top notch servicing we provide at a great price. Here at the 1 stop, EVERY SINGLE customer is valued and important to us.

。

</div><!--/.primary col-->
           <div class="secondary col">


  <h3>We offer:</h3>
            <ul>
                <li>10 Minute Oil Changes</li>
                <li>Transmission Services</li>
                <li>Coolant Services</li>
                <li>4x4 Servicing</li>
                <li>Power Steering Servicing</li>
                <li>Replacement of Air Filters, Wiper Blades & Light Bulbs</li>
                <li>Additive Services</li>
            </ul>   
    </div><!-- end .secondary col -->
    <div class="third col">
            <h3>Our specials include:</h3>
            <ul>
                <li>Everyday $19.95 oil change (up to 5qts, 5-30 and 10-30 weight only, standard canister oil filters only internals have fees)</li>
                <li>$69.95-$89.95 Transmission Service - beats any competitors price! </li>
                <li>$5 off any Valvoline Maxlife change</li>
                <li>$10 off any Valvoline Syn power change</li>
                <li>Multi-Service layered discounts, so the more services you combine, the more you save!</li>
            </ul>   
        </div><!-- end .third col-->
</div><!-- end .row -->

<footer class="main-footer">

<div class="fb-like" data-href="https://www.facebook.com/pages/Company name" data-width="50px" data-layout="button_count" data-action="like" data-show-faces="true" data-s  hare="true"></div>

    <div class="footer-inner">
        <span>&copy;2016 Oil Change.</span>
    </div>
</footer>

這是CSS

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}
body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
    font-size: .95em;
}
h2,
h3,
a {
    color: #093a58;
}
h1,
h2,
h3 {
    margin-top: 0;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.35em;
    margin: 0;
}
.main-nav {
    margin-top: 5px;
}
.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 15px;
}
.main-nav a {
    font-size: .95em;
    color: #243432;
    text-transform: uppercase;
}
.main-nav a:hover {
    color: #91aab6;
}

/* ---- Layout Containers ---- */

.main-header {
    padding-top: .35em;
    padding-bottom: .35em;
}

.banner,
.main-footer {
    text-align: center;
}

.banner {
    color: #fff;
    background: #130897;
    padding: 1em 0;
    margin-bottom: 24px;
}

.col {
    padding-right: 1em;
    padding-left: 1em;
}

.main-footer {
    background: #130897;
    padding: 2em 0;
    margin-top: 30px;
}




/* ---- Page Elements ---- */

.item-1,
.item-2,
.item-3 {
    width: auto;
    margin-top: 8px;
    margin-left: 20px;
    box-shadow: 10px 10px 5px #000;
}
.headline {
    margin-bottom: 0;
}
.feat-img {
    border-radius: 5px;
}

.footer-inner {
    color: #fff;
}

.col h2 {
    margin-top: 20px;
}

.col h3 {
    color: white;
}

.tagline {
    margin-top: 10px;
    font-style: italic;
}


.left-side a {
    color: white;
}

.left-side a:hover {
    color: red;
}


.map {
    float: left;
    margin-left: 150px;
}


.secondary h3,
.third h3 {
    color: black;
}

.secondary ul,
.third ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 20px;
}

.row {
    padding-top: 30px;
}


.fb-like {
    padding-bottom: 20px;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

      body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      }

    .main-header,
    .row,
    .footer-inner{
        width: 80%;
        margin: 0 auto;
        max-width: 1150px;
    }

    .tagline {
        font-size: 1.4em;
    }


.pictures {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: auto;

    }

.row {
  display: flex;
  }

    .main-header,
    .main-nav,
    .banner {
        display: flex;
    }
/*

    .main-header {
        flex-direction: column;
        align-items: center;
    }

    /*
.banner {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        flex-grow: 1;
    }
*/


    /*
.col {
        flex: 1 100%;
        justify-content: space-between;
    }
*/



}

@media (min-width: 880px) {

    .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


    .col {
        flex: 1 50%;
        justify-content: space-between;
    }

@media (min-width: 1025px) {

    .main-header {
        flex-direction: row;
        justify-content: space-between;
    }

    .col {
        flex: 1 33%;
        justify-content: space-between;
    }

}



*/

Answer 1

請注意，除了IE 8和9之外，所有主要瀏覽器都支持flexbox。

某些最新的瀏覽器版本（例如Safari 8和IE10）需要供應商前綴。 這似乎是您所缺少的。

要快速添加所需的所有前綴，請在左側面板中的以下位置發布CSS： Autoprefixer 。

Answer 2

對於Safari，您需要編寫-webkit-flex，對於IE 10-11，您需要編寫-ms-flex。

您可以在此處閱讀有關flex的更多信息： http : //www.w3schools.com/cssref/css3_pr_flex.asp

為什么我的網站在chrome和firefox中的外觀與使用flexbox的Safari中的外觀不同？

問題描述

2 個解決方案

解決方案1
2 已采納 2016-01-12 04:41:19

解決方案2
0 2016-01-12 06:50:49

為什么我的網站在chrome和firefox中的外觀與使用flexbox的Safari中的外觀不同？

問題描述

2 個解決方案

解決方案1 2 已采納 2016-01-12 04:41:19

解決方案2 0 2016-01-12 06:50:49

解決方案1
2 已采納 2016-01-12 04:41:19

解決方案2
0 2016-01-12 06:50:49