flexbox在android4.1及之前的版本兼容性问题

经过了一番实践和一些基本的兼容处理,至少在移动端flexbox还是有可为的(安卓4.0+,2.3+没测试,ios都还行)。但是坑也确实还有很多。
1,flexbox有多个版本,在低版本安卓下实行的是09年的旧版标准Flexible Box Layout Module
这个标准需要添加-webkit-前缀。其余的实行的是新的flexbox标准CSS Flexible Box Layout Module Level 1,其中ios9以下Safari需要添加-webkit-前缀。
2,旧版flexbox标准各浏览器支持属性有限,比如说不支持flex-wrap等。所以如果考虑兼容性的话需要只使用旧版标准中浏览器可以支持的属性。
3,还是旧版的问题,旧版的使用比例伸缩布局时会导致盒子内容大小不等会导致无法‘等分’等布局。这个时候需要设置width:0%;等把原始大小设置成0。
4,依旧是旧版的问题,旧版的box item要求属性是块级结构,所以很多inline元素需要设置display:block等才能显示正常。
5, 新发现 text-overflow: ellipsis;在display:flex元素上无效。


作者:龙博韬
链接:https://www.zhihu.com/question/29924791/answer/46255686
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

IE版本兼容性问题

08-17

我机器上安装的是IE10,文件选择框是这个样子的rn[img=http://img.bbs.csdn.net/upload/201408/17/1408253706_242962.jpg][/img]rn可是我用IETester测试各个IE版本,从IE6到IE8都是显示以下效果rn[img=http://img.bbs.csdn.net/upload/201408/17/1408253792_738541.jpg][/img]rn根本就无法选择文件,html代码是rn[code=html]rn rn 导入Excel rn[/code]rnrn还有一个问题rn在IETester中,IE6和IE7的效果是这样的rn[img=http://img.bbs.csdn.net/upload/201408/17/1408254068_341715.jpg][/img]rnIE8以上正常,应该是rn[img=http://img.bbs.csdn.net/upload/201408/17/1408254128_538435.jpg][/img]rnhtml代码是rn[code=html]rn rn rn rn 3 Projectsrn rn rn 27 Tasksrn rn rn 7 Messagesrn rn rn 5 Filesrn rn rn rn[/code]rnrnCSS样式代码为rn[code=css]rn.well rn min-height: 20px;rn padding: 19px;rn margin-bottom: 20px;rn background-color: #f5f5f5;rn border: 1px solid #e3e3e3;rn -webkit-border-radius: 4px;rn -moz-border-radius: 4px;rn border-radius: 4px;rn -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);rn -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);rn box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);rnrnrn.summary display:table; width:100%; padding:0; margin:0 0 20px 0;rn.summary ul margin:0; padding:0; overflow:hidden; display:table-row;rn.summary li margin:0; padding:19px; display:table-cell; border-right:1px solid #eee;rn.summary li:last-child border:none;rn.summary a display:block; font-size:1.2em; line-height:1.4em; text-transform:uppercase; color:#000;rn.summary .count display:block; font-size:1.75em; font-weight:bold;rnrn /* dashboard - ie fixes */rn .ie7 .summary display:block;rn .ie7 .summary ul margin:0; padding:0; overflow:hidden; display:block;rn .ie7 .summary li float:left;rn rn .ielt9 .summary .last border:none;rnrn[/code]

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试