Html CSS按钮在Safari 8中中断，但在Chrome、FF、IE中没有问题

我们在网站的首页上使用了几个按钮。我的CSS fu确实很糟糕，所以我从一个在线按钮生成器中获取了按钮CSS，并根据我们的喜好对其进行了修改

这个按钮在Chrome、Firefox和IE（前两个在OS X上测试过）中看起来很好，但在约塞米蒂岛的Safari 8上却出现了故障。我已经在JSFIDLE中隔离了目标HTML和CSS，以验证：

有问题的CSS片段：

.lander-btn, .lander-profile-btn {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    cursor:pointer;
    color:#777777;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}

.lander-btn {
    width: 400px;
    height: 90px;
    margin: -10px 0px;
    line-height:  90px;
    font-weight: bold;
}

.lander-btn:hover {
    background-color:#dfdfdf;
}

.lander-btn:active {
    position:relative;
    top:1px;
}

.lander-btn img {
    width: 100px;
    height: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 20px;
}

.lander-btn-txt {
    width:290px;
}

我尝试在Safari中切换inspector中的规则，但没有效果。你知道为什么会这样吗？

你在用这个标签吗

<button> 

反对这个标签

<input type = "submit"> tag?

标签？

---

这可能是个问题

我也有同样的问题。似乎（至少对于Safari而言）在按钮元素上，如果您试图将两个轴值居中，则需要将flex流显式定义为行或列

---

允许Safari默认设置为“行”，但我猜出于某种原因，它在按钮元素上忽略了它。

请详细说明？使用类或…？看起来它忽略了

显示：flex

。你可以用一个不同的显示器来修改它，就是这样！感谢您为我指出了正确的方向-在Safari flex中，需要webkit前缀，请参见：