感觉上,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里面的兼容问题?

代码如下:

.box{
display: -webkit-inline-box;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}

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

－－－－－

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

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

2014-1-7 updated

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