Flexbox 代码适用于除 Safari 之外的所有浏览器。为啥？

Posted 2023-03-04

【中文标题】Flexbox 代码适用于除 Safari 之外的所有浏览器。为啥？

【英文标题】：Flexbox code working on all browsers except Safari. Why?Flexbox 代码适用于除 Safari 之外的所有浏览器。为什么？

【发布时间】：2016-05-10 06:59:01

【问题描述】：

带有列表标签的网格列，我需要每 3 列以正确的顺序显示，并为每个额外的 html 列表元素启用自动宽度。

这是我的例子：

 <style>
        ul 
            margin: 0;
            padding: 0;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 150px;
            width:auto;
        
    
        li 
            float: left;
            display: inline-block;
            list-style: none;
            position: relative;
            height: 50px;
            width: 50px;
        
    </style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    </ul>

这是我迄今为止尝试过的，在其他所有浏览器上都可以正常工作，但与 Safari 浏览器不兼容，除非我添加：display: -webkit-flex;。

我想像这样转换输出：

1 4 7 10
2 5 8 11
3 6 9 12

重要的是我让它在 Safari 浏览器上工作，到目前为止我似乎根本无法解决这个问题，我会寻求任何帮助:)

测试链接：

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

【参考方案1】：

Flexbox 是一种 CSS3 技术。这意味着它相对较新，并且某些浏览器不提供对 flex 属性的完全支持。

这是一个破败：

IE 8 和 9 不支持 flexbox。如果您想在这些浏览器中使用 flex 属性，请不要浪费您的时间。 flexbox polyfill 转了一圈，但效果不佳，不再维护。

IE 10 支持previous version of flexbox 并需要vendor prefixes。请注意，IE10 不支持当前规范中的某些属性（例如flex-grow、flex-shrink 和flex-basis）。请参阅Flexbox 2012 Property Index。

IE 11 不错，但有问题。它基于current flexbox standard。请参阅this page 上的已知问题 选项卡了解一些问题。另见：flex property not working in IE

使用 Chrome、Firefox 和 Edge，您可以轻松应对。您会发现小错误和不一致之处，但通常可以轻松修复。您需要注意Implied Minimum Flex Sizing，它有时会导致大小调整和滚动条问题。

Safari 版本 9 及更高版本支持当前不带前缀的 flexbox 规范。但是，较旧的 Safari 版本需要 -webkit- 前缀。有时min-width 和max-width 会导致对齐问题，这可以通过flex 等效项解决。见Flex items not stacking properly in Safari

有关 flexbox 浏览器支持的完整评论，请参阅此页面： http://caniuse.com/#search=flex

要快速添加许多（但不一定是全部）供应商前缀，请使用Autoprefixer。对于 Safari，请参阅 this article 了解某些前缀生成器不包含的 -webkit- 前缀。

有关常见 flex 错误及其解决方法的列表，请参阅Flexbugs。

另外，在这个网站上，有：

Flexbox Tag Info

【参考方案2】：

它适用于我 display: -webkit-inline-box; 在 safari 中。

【讨论】：

它确实有效；但是 safari 中的其他 flex 实用程序呢？

我将此与 Safari (7.1+) 特定的定位代码结合使用，以避免与其他浏览器冲突，非常感谢 Saravana ！ ryadel.com/en/…