浏览器之间不一致的柔性盒布局(Chrome和Safari)

Question

我已经建立了一个区块，在一个网格中显示来自WordPress的最新帖子()，我决定第一次使用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>

​

较少

.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 铬

知道为什么会这样吗？

谢谢

Answer 1

首先，您的引导是不正确的。您不应该在一行中有一行，其中没有列。你不应该有一列没有一行。实际上，在每个断点上，不应该有超过12列的列。

这是错误的：

<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所做的就是说“宽度: 100%"，这已经通过块级元素来应用了。

第三，应该使用container或container-fluid将左右填充添加到边缘(而不是col-xs-12)。

第四，::before和::after (行上清除的一部分)算作该行的子级。这意味着，如果在行中使用display: flex，它也将应用于::before和::after psuedo元素。

最后，Safari仍然需要供应商前缀。

下面是在Safari中使用的更新的钢笔：http://codepen.io/anon/pen/rOYxNG (注意，CSS选项中签入了“自动重定位器”)

Answer 2

我注意到，您没有用class=row在div中包装您的外部列(bootstrap )。我非常肯定，在使用引导时，应该始终有行包装列。