瀏覽器之間不一致的flexbox佈局（Chrome瀏覽器和Safari瀏覽器）

Question

我一直在拼湊一個塊，它將在網格中顯示來自WordPress的最新帖子（Twitter Bootstrap），並且我決定首次使用flexbox進行遊戲。

我開始慢慢地瞭解它，但我發現Chrome和Safari顯示的內容有所不同。

我錯過了什麼嗎？

HTML

<div class="col-xs-12 forcontent element-contents element-latest-posts" role="document"> 
     <div class="content row"> 



       <div class="latest-posts "> 


<div class="row"> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/yet-another-test-post/">Yet another test post</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/yet-another-test-post/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/05/180H.jpg" class="attachment-post-thumbnail wp-post-image" alt="180H">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non me</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:03:00+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 23 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/yet-another-test-post/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/another-test-post/">Another Test Post</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/another-test-post/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/05/188H.jpg" class="attachment-post-thumbnail wp-post-image" alt="188H">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:02:29+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 24 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/another-test-post/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/a-large-post/">A large Post</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/a-large-post/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/04/slide-3.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-3">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:16:54+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/a-large-post/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/test/">test</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/test/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/05/168H.jpg" class="attachment-post-thumbnail wp-post-image" alt="168H">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:14:06+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/test/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 
      <article class="col-xs-12 col-md-4"> 
     <header> 
      <h2 class="entry-title"><a href="/stc/holidays/uncategorized/hello-world/">Hello world!</a></h2> 
     </header> 

        <section class="featured-image"> 
      <a href="/stc/holidays/uncategorized/hello-world/" class="featured-image-link"> 
       <img src="/stc/wp-content/uploads/2015/04/slide-6.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-6">    </a> 
     </section> 

     <section class="entry-summary"> 
      <p>Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit ali</p>   </section> 
     <footer> 
      <p class="byline author vcard"><time class="updated" datetime="2015-03-19T14:48:48+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="19th March, 2015"><i class="fa fa-clock-o"></i> Posted 7 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p> 
      <a href="/stc/holidays/uncategorized/hello-world/" class="btn btn-default btn-block featured-image-link"> 
       Continued    </a> 
     </footer> 
    </article> 

</div> 

LESS

.element-latest-posts { 

    .latest-posts .row { 
     display: flex; 
     flex-flow: row wrap; 
     justify-content: flex-start; 

    } 


    article { 
     flex: 0 auto; 
     // flex: 1 auto; 

     margin-bottom: 15px; 

     &:first-of-type { 
      flex: 1 auto; 
     } 

     &:last-of-type { 
      flex: 0 auto; 
     } 

     display: flex; 
     flex-flow: column; 
     justify-content: flex-start; 

     section { 
      flex: 1 auto; 

      &.featured-image { 
       // display: none; 
       a { 
        display: block; 

        &:hover { 
         transform: scale(0.8); 
         outline-width: 0 !important; 
        } 

        img { max-width: 100%; } 
       } 
      } 

      &.entry-summary { 
       display: flex; 
       flex-flow: column; 
       justify-content: center; 

       &.no-featured-image {} 

       span { 
        flex: 1 auto; 
       } 
      } 
     } 

     footer { 
      a { 
       &.btn { 
        &:hover { border-color: transparent; } 
       } 
      } 
     } 



    } 
} 

屏幕截圖

Safari Chrome

任何想法，爲什麼這是？

感謝

Answer 1

首先，你的引導是不正確的。你不應該在沒有列之間的行內有一行。而且你永遠不應該有一列沒有一行。你也不應該有在每個中斷點加起來超過十二個的列。

這是錯誤的：

<div class="row"> 
    <div class="row"></div> 
</div> 

這也是錯誤的：

<div class="col-xs-8"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 
<div class="col-xs-4"></div> 

爲了保持引導正常工作，該唯一，可以是一排的孩子是一個列，並且列的直接父級必須是一行。這是因爲列浮動並且該行清除浮動。

這是正確的：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-8"> 
     <div class="row"> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4"></div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4"></div> 
     </div> 
    </div> 
    <div class="col-xs-4"></div> 
    </div> 
</div> 

其次，你不需要在這裏指定col-xs-12：<article class="col-xs-12 col-md-4">。所有col-xs-12確實是說「width：100％」，它已經通過塊級元素被應用。

第三，您應該使用container或container-fluid向邊緣添加左側和右側填充（而不是col-xs-12）。

第四，::before和::after（該行的clearfix的一部分）計爲該行的子級。這意味着如果您在該行上使用display: flex，則它也會將flexbox應用於::before和::after僞元素。

最後，Safari仍然需要供應商前綴。

這裏是更新的筆與它在Safari工作：http://codepen.io/anon/pen/rOYxNG（請注意，「Autoprefixer」在CSS選項被選中）

Answer 2

我注意到，你不帶class =行一個div包住外柱（引導COL）。我非常確定，在使用引導程序時，您應始終使用包裝列的行。