在Safari中具有顯示功能的按鈕高度不一致

Question

我有一個封裝在div下的button ，其結構如下：

HTML：

 <div class="parent-container">
      <div class="child child-1 col-xs-6">
        <button class="btn btn-primary">Customize Feed</button>
      </div>
      <div class="child child-2 col-xs-6">
        <button class="btn btn-default">Really Really Really Really Really Really Long CTA text</button>
      </div>
    </div>

CSS：

    .parent-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .child-1 {
      order: 2;
    }

    .child-2 {
      order: 1;
    }

    .child button {
      height: 100%;
      white-space: normal;
    }

    .child button {
      width: 100%;
    }

無論內容的長度如何，兩個按鈕（長文本和短文本）都應占據相同的高度。 除 macOS中的Safari 之外 ，它在所有瀏覽器中均可正常運行。

演示版

發行截圖 （來自演示） ：

Answer 1

我對您的CSS進行了一些更改並使其正常運行。

button的父元素需要具有flexbox才能使按鈕變得靈活 。

 .parent-container { display: flex; flex-direction: row; } .child-1 { display: flex; flex: 1; order: 2; } .child-2 { order: 1; } .child button { flex: 1; white-space: normal; width: 100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="parent-container"> <div class="child child-1 col-xs-6"> <button class="btn btn-primary">Customize Feed</button> </div> <div class="child child-2 col-xs-6"> <button class="btn btn-default">Really Really Really Really Really Really Long CTA text</button> </div> </div> 

JSFiddle