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，不知道算不算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下，总算都正常了...如图：
