Flexbox 代码适用于除 Safari 之外的所有浏览器.为什么? [英] Flexbox code working on all browsers except Safari. Why?
问题描述
带有列表标签的网格列，我需要每 3 列以正确的顺序显示，并为每个额外的 HTML 列表元素启用自动宽度.
Grid columns with list tags, I need to display in correct order per every 3 columns, with auto width enabled for every extra HTML list elements.
这是我的例子:
<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;.
This is what I have tried so far and works absolutely fine on every other browser but not compatible with Safari browser unless I add this: display: -webkit-flex;.
我想像这样转换输出:
1 4 7 10
2 5 8 11
3 6 9 12
重要的是我让它在 Safari 浏览器上工作，到目前为止我似乎根本无法解决这个问题，我会提供任何帮助:)
It's important I get this working for Safari browser so far I cant seem to solve this problem at all, I would appropriate any help :)
测试链接:
http://jsfiddle.net/rafcastro77/3zd7yspg/59/
推荐答案
Flexbox 是一种 CSS3 技术.这意味着它相对较新，一些浏览器不提供对 flex 属性的完全支持.
Flexbox is a CSS3 technology. This means it's relatively new and some browsers don't provide full support for flex properties.
这是一个破败:
IE 8 和 9 不支持 flexbox.如果您想在这些浏览器中使用 flex 属性，请不要浪费时间.flexbox polyfill 进行了一段时间，但效果不佳，不再维护.
IE 8 and 9 do not support flexbox. If you're wanting to use flex properties in these browsers, don't bother wasting your time. A flexbox polyfill made the rounds for a while, but it didn't work well and is no longer maintained.
IE 10 支持 之前版本的 flexbox 并需要 供应商前缀.请注意，IE10 不支持当前规范中的某些属性(例如 flex-grow、flex-shrink 和 flex-basis).请参阅 Flexbox 2012 属性索引.
IE 10 supports a previous version of flexbox and requires vendor prefixes. Be aware that certain properties from the current spec aren't supported in IE10 (such as flex-grow, flex-shrink and flex-basis). See the Flexbox 2012 Property Index.
IE 11 不错，但有问题.它基于当前的 flexbox 标准.有关一些问题，请参阅此页面上的已知问题标签.另请参阅:flex 属性在 IE 中不起作用
IE 11 is good, but buggy. It's based on the current flexbox standard. See the KNOWN ISSUES tab on this page for some of the problems. Also see: flex property not working in IE
使用 Chrome、Firefox 和 Edge，您一切都很好.您会发现一些小错误和不一致之处，但通常可以轻松修复.您需要注意隐含的最小 Flex 大小，这有时会导致大小和滚动条问题.
With Chrome, Firefox and Edge you're good all around. You'll find minor bugs and inconsistencies but there are usually easy fixes. You'll need to be aware of Implied Minimum Flex Sizing, which sometimes causes sizing and scrollbar problems.
Safari 9 及更高版本支持当前没有前缀的 flexbox 规范.但是，较旧的 Safari 版本需要 -webkit- 前缀.有时 min-width 和 max-width 会导致对齐问题，这可以用 flex 等价物解决.请参阅 在 Safari 中未正确堆叠 Flex 项目
Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents. See Flex items not stacking properly in Safari
有关 flexbox 浏览器支持的完整评论，请参阅此页面:http://caniuse.com/#search=flex
For a complete review of flexbox browser support, see this page: http://caniuse.com/#search=flex
要快速添加许多(但不一定是全部)供应商前缀，请使用 Autoprefixer.对于 Safari，请参阅 这篇文章 了解 -webkit- 某些前缀生成器不包含的前缀.
For a quick way to add many (but not necessarily all) vendor prefixes use Autoprefixer. For Safari, see this article for -webkit- prefixes that some prefix generators don't include.
有关常见 Flex 错误及其解决方法的列表，请参阅Flexbugs.
For a list of common flex bugs and their workarounds see Flexbugs.
此外，在这个网站上，还有:
Also, on this site, there's:
这篇关于Flexbox 代码适用于除 Safari 之外的所有浏览器.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
