1. 因为想用 border-collapse 合并边框，就想到用table来做某个段落的布局。
结果发现要给td设置圆角border-radius，它天然跟 border-collapse 冲突。
再发现左右两边的td盒子中间，IE和FF都产生了1px的空隙。而CSS初始化中，明明已经都写了margin:0 padding:0，为什么会这样。
先试试给table标签设置 cellspacing="0" cellpadding="0"，问题依旧存在。
于是开始把所有的CSS属性都勾选掉试试看，发现问题出在display:inline-flex 上。原因在于给盒子设置了 display: inline-flex, 或者 display: inline-block。
解决办法就是把html里，td间的换行或者空格删掉或者注释掉。
<td></td><!------- ---><td></td>
2. DIV，或者P标签，或者随便什么块状元素，如果忘记加固定宽度或者相对比例的宽度，那么，在IE和FF下， 给父容器设置了 display:flex 后，子项目的图片有可能会产生变形，子项目包裹文字的块状元素，文字跑位。
这个文字跑位，是因为刚好给它写了标签切换事件，在IE11下测试，发现文字方向变成竖排，位置就像是设定了绝对定位一样，移动到页面左侧。解决办法就是给它设定宽度。
这个问题只发生在IE（发现也发生在Safari浏览器），不知道算不算IE的bug。也许IE是不苟言笑的标准浏览器，不像Chrome那么贴心...自动补全你偷的懒、你疏忽掉的细节...
3. 设置flex-direction: column，容器高度如果小于子项目（比如文字内容撑起的高度），设置 justify-content 在IE下无效。
找到了原因，那么开始想解决办法。给子容器再包一层容器，这个新晋的爸爸容器不设定高度，原来的容器变成祖父辈的容器。在祖父容器设定比较小的高度，但不设置 justify-content 和 flex-direction: column;
而是在喜当爹的父容器里设置这些属性。具体看代码：
<style type="text/css"> .xytfd_title{ display: flex; align-items: center; justify-content: center; width: 1000px; margin: 50px auto 0; height: 50px; box-sizing: border-box; } .title_01{ border-top: 1px solid #bab8b8; flex: auto; display: block; } .title_02{ font-size: 40px; color: #2380cc; padding: 0 30px; text-align: center; display: flex; /*flex-direction: column;*/ /*justify-content: center;*/ align-items: center; line-height: 36px; height: 36px; border-left: 1px solid #bab8b8; border-right: 1px solid #bab8b8; } .xytfd_title h3 { font-size: 40px; color: #2380cc; padding: 0 30px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; /*line-height: 36px;*/ /*height: 36px;*/ /*border-left: 1px solid #bab8b8;*/ /*border-right: 1px solid #bab8b8;*/ } .xytfd_title h3 span{ font-size: 14px; color: #bab8b8; display: block; } .xytfd_icon { margin-top: 20px; } .xytfd_icon img{ width: 16px; display: block; margin: 0 auto; } </style> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <section class="xytfd_banner"> <div class="xytfd_title"> <span class="title_01"></span> <div class="title_02"> <h3> <b>埋下一座城，关了所有灯</b> <span>Buried city, to shut all lights</span> </h3> </div> <span class="title_01"></span> </div> <div class="xytfd_icon"> <img src="images/icon_banner.jpg" alt=""> </div> </section> </body>
在IE和FF和Chrome下，总算都正常了...如图：
