css - 浏览器之间的 flexbox 布局不一致(Chrome 和 Safari)

标签 css google-chrome safari less flexbox

我一直在组装一个 block ，用于在网格中显示来自 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>

少

.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

知道这是为什么吗？

谢谢

最佳答案

首先，你的Bootstrap做的不对。你不应该在一行中有一行而中间没有一列。而且你永远不应该有没有一行的列。您也不应该在每个断点处添加总计超过 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>

为了使 Bootstrap 正常工作，唯一可以作为行的子项的是列，而列的直接父项必须是行。这是因为列是 float 的，而行清除了 float 。

这是正确的:

<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%”，它已经作为 block 级元素应用。

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

第四，::before和 ::after (行上的 clearfix 的一部分)算作该行的子项。这意味着如果您使用 display: flex在该行，它将 flexbox 应用于 ::before和 ::after伪元素也是如此。

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

这是在 Safari 中工作的更新笔:http://codepen.io/anon/pen/rOYxNG (注意在 CSS 选项中勾选了“Autoprefixer”)

关于css - 浏览器之间的 flexbox 布局不一致(Chrome 和 Safari)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33171844/

上一篇：html - 强制 li 元素继承其容器的全宽

下一篇：javascript - 奇怪的 Chrome 图像行为 :

相关文章：

css - 使用空白 : nowrap 时 Safari/WebKit 表溢出

ios - 通过浏览器查找iPhone型号信息

css - jQuery Tabs CSS UI 问题

javascript - jquery 选择器不提供所有元素

jquery - 为什么这些 div 没有排队？

google-chrome - 无法加载资源:net::ERR_INCOMPLETE_CHUNKED_ENCODING

google-chrome - 打印预览中不显示背景颜色

jquery - 如何防止 Chrome 中 focus() 上的文本选择

html - 是否可以在选中的复选框标签之前设置样式::之前？

css - meteor :使用MyFonts中的@ font-faces让Safari立即崩溃

©2024 IT工具网  联系我们