IE11中使用flex + min-height做垂直置中的問題

前端的人使用bootstrap4切版，套版後覺得不好看，臨時改成有有最小高度，結果發現在IE無法垂直置中，查半天跟flex有關的資料，看到internet-explorer - 在 IE 中，css Flexbox不是垂直居中提到height要設定因為ie的bug，實際設定height設個比min-height小的值，就真的垂直置中了，真的太神奇了 ＠＠

PS. 不確定是否全部ie版本都能用，但ie11可行。

--- 7/16 更新
傻傻的以為能用，這做法不適合高度會變動的版面

參考網址：
internet-explorer - 在 IE 中，css Flexbox不是垂直居中

A tag點選事件穿透上層Div

最近一個案子首頁滿版底圖中空youtube影片顯示，現在很多都這樣設計，但偏偏其右側偏中有個scroll的圖片加連結，切版拿到時，發現不讓景點出現在四週留白，連結會不能點選（因為被底圖的DIV所蓋住了，最快方式就是讓底圖無法被click，找半天發現CSS就能設定，如下：

.bg{
     pointer-events: none; //在CSS中加這段即可
}

不過IE似乎問題不少，但這篇HTML/CSS make clickable through transparent DIV layer有提到覺得IE很麻煩設定，可以試著用這個Pointer Events Polyfill

參考網址：
Click through a DIV to underlying elements
HTML/CSS make clickable through transparent DIV layer
Pointer-events:none or Click Through div

CSS學習筆記－控制斷行

最近遇到一個在<a>中的內容要斷行的需求，印象中以前是不行的，查了下才知道，其實可以針對擺<p>、<div>或<li>下的<a>，對其內容斷行，<p>、<div>或<li>加入word-break: break-all即可，如下設定：

<p style="word-break: break-all;"><a href="http://www.google.com">Google</a><p>

參考網址：
CSS: Line Wrap Tutorial
CSS 語法，文字換行，強迫不換行。

html文字設定高度後，要水平置中

html文字的排版，在CSS設定了高度(height)後，希望它能在中央，但用了text-align或是vertical-align都無效，看別的官網半天，才知道要用的應該是line-height，只要用了後，自然就會在中央了。

這邊筆記一下