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中正常工作

回答

相關問題