Question

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

此按钮在Chrome，Firefox和IE（前两个在OS X上测试过）中看起来很不错，但在Yosemite上的Safari 8上分开了。我已经在jsfiddle中隔离了目标HTML和CSS以验证：http://jsfiddle.net/0njbe8v5/

相关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中的检查器中切换规则无效。任何想法为什么会发生这种情况？

Answer 1

你正在使用这个标签

吗？

<button>

反对此标记

<input type = "submit"> tag?

这可能是一个问题

Answer 2

我遇到了同样的问题。在按钮元素上似乎（对于Safari至少），如果您尝试将两个轴值都居中，则需要将flex-flow明确定义为行或列。

授予Safari应该默认为“row”，但我想由于某种原因它会忽略按钮元素。

Safari 8中的CSS按钮中断，但在Chrome，FF，IE中很好

2 个答案: