html – Flexbox代码在除Safari之外的所有浏览器上工作.为什么？

概述具有列表标签的网格列,我需要按照每3列显示正确的顺序,并为每个额外的html列表元素启用自动宽度. 这是我的例子： <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></ 具有列表标签的网格列,我需要按照每3列显示正确的顺序,并为每个额外的HTML列表元素启用自动宽度.

这是我的例子：

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

我想转换这样的输出：

1 4 7 102 5 8 113 6 9 12

这是我迄今为止所尝试的,并且在其他浏览器上工作得很好,但与Safari浏览器不兼容,除非我添加：display：-webkit-flex ;.

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

它的重要我得到这个工作为Safari浏览器到目前为止我似乎无法解决这个问题,我会适当的任何帮助:)

测试链接：
http://jsfiddle.net/rafcastro77/3zd7yspg/59/

解决方法 FlexBox是一种CSS3技术.这意味着它相对较新,一些浏览器不能完全支持Flex属性.

这是一个失败：

> IE 8和9不支持flexBox.如果您想在这些浏览器中使用flex属性,不要浪费时间. flexbox polyfill出场了一段时间,但没有发挥好的作用,不再维持.
> IE 10支持previous version of flexbox,需要vendor prefixes.请注意,IE10中不支持当前规范的某些属性(如flex-grow,flex-shrink和flex-based).见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-前缀.有时,最小宽度和最大宽度会导致对齐问题,可以通过d性等效方法解决.见Flex items not stacking properly in Safari

要了解FlexBox浏览器支持的完整信息,请参阅此页面：
http://caniuse.com/#search=flex

要添加许多(但不一定全部)供应商前缀的快速方法,请使用Autoprefixer.对于Safari,有关前缀生成器不包含的-webkit-前缀,请参阅this article.

有关常见的d性错误及其解决方法的列表,请参阅Flexbugs.

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

> Flexbox Tag Info> FlexBox文档

总结

以上是内存溢出为你收集整理的html – Flexbox代码在除Safari之外的所有浏览器上工作.为什么？全部内容，希望文章能够帮你解决html – Flexbox代码在除Safari之外的所有浏览器上工作.为什么？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。