水平/豎直居中在舊版Safari上的bug

今天調了兩個出如今舊版Safari上的layout bug. 它們最初是在同事的iPad上被發現的, 我在本身桌面上安裝的Safari 5.1.7上也可以復現.

Bug1: .vertical-center失效

從網上學來了一個很好用的豎直居中的css.

.vertical-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

絕大多數狀況都足以應付, 可是同事的iPad上那些被.vertical-center的元素都下移了很是多.

DEMO

我發現是由於這些元素的父元素設置了height: 100%致使的. 它使.vertical-center元素的top: 50%計算值並不是是父元素高度的50%, 而是body高度的50%.

(爲何不給父元素加上.vertical-center? 由於我想對父元素position: absolute.)

因爲這種狀況下, 我要豎直居中的元素的高度都是肯定的, 因而個人解決方法是給父元素加上:

.vertical-center-absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

而後爲父元素設置好高度便可, 該高度須要剛好容納待豎直居中的元素.

DEMO

Bug2: .center-block失效

.center-block是bootstrap中的樣式, 可是舊版Safari也在某些狀況下沒法正常水平居中元素.

DEMO

我發現出現這種狀況時只須要爲待居中元素設置width便可. 可是恰巧我不想對個人待居中元素設置寬度, 所以只能換一種方式: 給父元素設置text-align: center, 給待居中元素設置display: inline-block.

DEMO