inline-block在Firefox/Safari中出現比Chrome更寬，溢出行

我製作this site。在Chrome（v24.0）上，一切都按預期顯示。當我在Safari或Firefox中查看它時，佈局中斷：右上角的「查看購物車」和「結賬」鏈接溢出到另外一行。這很難描述，但比較他們在Chrome瀏覽器（正確）與Firefox和Safari瀏覽器（錯誤）中的顯示方式，這應該是明顯的我的意思。inline-block在Firefox/Safari中出現比Chrome更寬，溢出行

我該如何解決這個問題？我試過的一切都成功地解決了Firefox和Safari中的問題，只是在Chrome中解決了這個問題。

我現在的CSS（薩斯）：

.account-links { 
    font-size: 0; 
} 

.account-links a { 

    box-sizing: border-box; 
    width: 90px; 

    margin: 0px; 
    font-size:9pt; 

    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; 
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; 
    box-shadow:inset 0px 0px 0px 0px #ffffff; 
    background:-webkit-gradient(linear, 
           left top, left bottom, 
           color-stop(0.05, #f9f9f9), 
           color-stop(1, #e9e9e9)); 
    background:-moz-linear-gradient(center top, 
            #f9f9f9 5%, #e9e9e9 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9'); 
    background-color:#f9f9f9; 
    border-top:1px solid #dcdcdc; 
    border-bottom:1px solid #dcdcdc; 
    &:first-child { 
     border-right:1px solid #dcdcdc; 
    } 
    display:inline-block; 
    color:#666666; 
    font-family:arial; 
    font-weight:bold; 
    padding: 5px 0px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #ffffff; 
    &:hover { 
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9)); 
     background:-moz-linear-gradient(center top, #e9e9e9 5%, #f9f9f9 100%); 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9'); 
     background-color:#e9e9e9; 
    } 
    &:active { 
    position:relative; 
     top:1px; 
    } 
}

來源

2013-02-22 GMA

這是因爲您使用前綴爲box-sizing的爲#shop-meta .account-links a。添加-moz-box-sizing: border-box ~~和 -webkit-box-sizing: border-box~~ 它應該按預期工作。

編輯：其實我發現Safari中有一些錯誤（使用v5.1.7 for Windows），可以防止正常工作。該瀏覽器的解決方案是在.account-links a上設置float: left。你不需要-webkit-box-sizing。

來源

2013-02-22 19:19:51

我遇到了與Chrome的這幾次的問題。大多數時候，我自己看着辦吧，但幾次我不得不求助於使用此：css_browser_selector.js

基本上，它允許你編寫CSS是這樣的：

.gecko .account-links a{}

然後將適用該CSS使用壁虎引擎（即Firefox）的瀏覽器。我在幾個生產站點上使用它（主要用於IE，但Firefox也是一次或兩次），我也沒有遇到任何問題。

這意味着您可以使用Firefox和Safari的解決方案，而不會破壞Chrome中的工作。

來源

2013-02-22 19:02:32 Ryan

inline-block在Firefox/Safari中出現比Chrome更寬，溢出行

回答

相關問題