We have a couple of buttons used in our site's front page. My CSS-fu is admittedly terrible so I sourced the button CSS from an online button generator and modified it to our tastes.

This button looks fine in Chrome, Firefox, and IE (former two tested on OS X) but breaks apart on Safari 8 on Yosemite. I've isolated the target HTML and CSS in jsfiddle to verify: <http://jsfiddle.net/0njbe8v5/>

Snippet of the CSS in question:

```
.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;
}

```

I've tried toggling rules in the inspector in Safari to no effect. Any ideas why this is happening?