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下，總算都正常了...如圖：
