Safari 8中的CSS按钮中断，但在Chrome，FF，IE中正常工作

我们在我们网站的首页使用了一些按钮。我的CSS-fu确实很糟糕，所以我从一个在线按钮生成器获得了CSS按钮，并将其修改为我们的口味。Safari 8中的CSS按钮中断，但在Chrome，FF，IE中正常工作

这个按钮在Chrome，Firefox和IE（前两个在OS X上测试过）中看起来很好，但在优胜美地的Safari 8上分开。我已经分离出的目标HTML和CSS中的jsfiddle验证：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中的检查没有效果尝试切换规则。任何想法为什么发生这种情况？

来源

2014-12-01 Denis Wong

它看起来像忽略了'display：flex'。您可以用不同的显示器重新制作它 – 2014-12-01 23:21:45

就是这样！感谢您指引我朝着正确的方向 - 在Safari flex中需要webkit前缀：http://www.w3schools.com/cssref/pr_class_display.asp – 2014-12-02 02:03:20

您使用这个标签

<button>

反对这种标签

<input type = "submit"> tag?

这可能是一个问题

来源

2014-12-01 20:24:03 StevenAkaTaz

请详细说明一下吗？使用类或...？ – 2014-12-01 20:41:06

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

授予Safari浏览器应该默认为“行”，但我想它会忽略因某种原因按钮元素。

来源

2015-02-04 03:28:24

Safari 8中的CSS按钮中断，但在Chrome，FF，IE中正常工作

回答

相关问题