I block ads too. Donate?

解决inline-flex兼容问题

2014-01-06 15:46:08

[网页设计] , ,

 

感觉上,CSS 其实是很简单的,最难理解的应该是CSS的盒子结构了,特别是IE早期版本的各种怪异盒子结构.如果能不使用,尽量还是不要使用。

 

 

属性方面比较难理解的应该是display相关的属性,常用的block和none,这个就不用再说了,但是其他的基本上都要试一下才知道怎么弄.今天为了解决一个网页的BUG,发现将display的值改成inline-flex才能正确显示.

 

 

 

 

将这个属性改成inline-flex 问题应该解决了吧,但是提交这个bug的客户用的是mac电脑,使用Safari浏览器.

 

 

于是用手机的Safari试了一下,问题出现了,上MDN查了一下,inline-flex竟然不支持Safari.

inline-flex感觉又无可替代.同样是webkit, Chrome可以 Safari就不行.如何解决inline-flex在safari里面的兼容问题?

 

代码如下:

以上这段代码可以基本上解决inline-flex 在各个浏览器的兼容问题。

 

-----

经过后续的实验,发现inline-flex是不支持IE的早期版本的,因此应该慎用。

在IE11的模拟IE8环境中,inline-flex显示是正确的,但是事实上在该版本的浏览器是显示不正确的。因此不要以为inline-flex可以在IE8中使用。

2014-1-7 updated

 

 

还是那样,能够不使用就不要使用了。

 

 

 

这篇博文发表在 网页设计 目录下,标签为 , ,
版权所有,请勿转载。如需引用,请使用链接:https://note.masterchan.me/?p=216
 

您的邮箱地址不会被公开,评论使用Gravatar头像。
Your email address will not be published. This blog is using Gravatar.

正在提交评论...
正在为您准备评论控件