zoukankan      html  css  js  c++  java
  • 水平/竖直居中在旧版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

  • 相关阅读:
    解决Struts中文乱码问题总结
    多校第十场1009 CRB and String题解
    DirectX--Filter属性页的调用
    理解ThreadLocal类
    unity3d
    使用Java8提供的Duration类制作字幕时间轴调整工具
    算法练习--卡片游戏
    在eclipse中创建web项目
    testNg官方文档
    TestNG基本注解(注释)
  • 原文地址:https://www.cnblogs.com/7z7chn/p/4979456.html
Copyright © 2011-2022 走看看