在旧版浏览器中显示表格

本文介绍了在旧版浏览器中显示表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 有没有比下面更好的方法来确保我只针对不支持flexbox的浏览器。我认为这可以工作，但也许我只需要一些样式，例如ie8和9，可能会影响现代浏览器。最好是完全创建一个单独的样式表？ .flex { display：table; display：flex; .column { display：table-cell; display：inline-block; $ p $ b $ p 解决方案长的答案很复杂。好的一点是IE10和今天使用的大多数较老的浏览器都支持flexbox。但是老式的语法与规范和行为完全不同。请参见 flexbox支持表。我还建议您使用工具查看和/或使用生成传统的flexbox样式复选框启用，以了解涉及的内容。它会给你一个相当交叉兼容的CSS语法来使用。 如果你关心与旧浏览器的交叉兼容性，你应该*，显示：flex;不建议单独使用。您需要添加这些旧的Flexbox前缀。至于IE8和9，如果必须的话，可以使用确实针对IE8桌面浏览器的表格回退。下面的规则集： .flex-container { display：table; / * IE< 10，Opera * Presto *桌面（现在死了）* / 显示：-webkit-box; / * Safari 3.1 - 6，Chrome< 21（2009 Spec），UCBrowser Android * / display：-moz-box; / * Firefox 2 - 27（2009 Spec），UCMini Android * / display：-ms-flexbox; / * IE10（2012语法）* / 显示：-webkit-flex; / * Safari 6.1-8，Android< 4.4，BB display：flex; / * Edge 12+，Firefox 28+，Blink，Safari 9+，Opera Mini 8+ * / } 注意新旧Flexbox规格和支持之间的主要差异在于缺少柔性包装。所以除了许多[flexbugs]（ https://github.com/philipwalton/flexbugs ）并留意差异。请记住，您不能使用 flex-wrap 是否需要在2012浏览器或IE9之后的广泛的向后兼容性。 *还值得一提的是，如果您的目标用户位于亚洲或非洲，您肯定需要UCBrowser的 -webkit-box 模型Android，目前仍然不支持新的语法。 （截至2016年，UCBrowser在全球范围内使用手机浏览器的比例超过10％，在亚洲的比例为25％）。 -moz-box 对于基于旧版Firefox的UCMini也是需要的（但是使用数据和行踪是公开未知的）。 对于flex项目 table-cell 或 table-row 后备。这是非常棘手的，特别是与flexbox嵌套。 然而，有3个选项可用： 1）使用使用 Modernizr 等脚本进行功能检测。并使用Modernizr CSS文档样式通过JS功能检测声明IE8-9回退规则。像这样： html.no-flexbox .flex-item { display：table-cell; 2）使用IE CSS条件式样： <！ - [if lte IE 9]> < link rel =stylesheettype =text / csshref =ie-8-9-fallbacks.css/> <！[endif] - > OR 3） -JS的方式是使用 CSS黑客。显示值将被其他浏览器忽略，并且只能被IE8-9解析和应用。 .flex-item { display：block; display：table-cell \0 /; / * IE8-10 * / } 和/或：b） @media \0screen\，screen\9 {/ * IE6-10并排除FF2 * / .flex-item {display：table-cell; } } Is there a better way than below to ensure that I only target browsers that don't support flexbox. I think this could work, but maybe I'll need some styles only for ie8 and 9 for example that might affect modern browsers too. Would it be best to create a separate stylesheet altogether?.flex{ display:table; display:flex; .column{ display:table-cell; display: inline-block; }}Thanks! 解决方案 The long answer is complicated. The good thing is that IE10 and most older browsers in use today, support flexbox. But an old syntax with a quite different spec and behavior. See flexbox support table. I also suggest you have a look and/or use this tool with the Generate legacy flexbox styles checkbox enabled to get an idea of what's involved. It will give you a fairly cross compatible CSS syntax to use.If you care about cross-compatiblity with older browsers as you should*, display:flex; alone is not recommended. You need to add those old flexbox prefixes. As for IE8 and 9, you can use a table fallback indeed targeting IE8 desktop browsers if you must. Which comes to the following rule set:.flex-container { display: table; /* IE < 10, Opera *Presto* Desktop (Now dead) */ display: -webkit-box; /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */ display: -moz-box; /* Firefox 2 - 27 (2009 Spec), UCMini Android */ display: -ms-flexbox; /* IE10 (2012 Syntax) */ display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */ display: flex; /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */}Noting that the main feature differences between new and old flexbox spec and support is the lack of flex-wrap. So besides the many ["flexbugs"] (https://github.com/philipwalton/flexbugs) and differences to watch for. Keep in mind that you cannot use flex-wrap is you want extensive backward compatibility beyond 2012 browsers or IE9.*It's also worth noting that if your target users are in Asia or Africa, you will definitely need the -webkit-box model for the UCBrowser for Android, which currently still doesn't support the new syntax. (As of 2016, UCBrowser has over 10% of mobile browser usage worldwide and 25% in Asia). -moz-box is arguably also needed for UCMini which is based on older Firefox (usage data and whereabouts is publicly unknown however).For the flex items table-cell or table-row fallbacks. It gets tricky, especially with flexbox nesting.However, there are 3 options available:1) Use feature detection with a script like Modernizr. And use the Modernizr CSS document styling to declare the IE8-9 fallback rules via JS feature detection. Like this:html.no-flexbox .flex-item { display: table-cell;}2) Use IE CSS conditional styling:<!--[if lte IE 9]> <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" /><![endif]-->OR3) The other no-JS way is using CSS hacks. With a display value which will ignored by other browsers, and only be parsed and applied by IE8-9.With: a).flex-item { display: block; display: table-cell\0/; /*IE8-10 */}and/or:b)@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */ .flex-item { display: table-cell; }} 这篇关于在旧版浏览器中显示表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..