Safari水平滾動

Question

我的問題發生在大型桌面屏幕上。

你可以有問題的樣本在這裏==>http://www.pricebreak.it/#!explore/Sports-et-loisirs/17-AB-Prince-Pro-Banc-a-abdominaux

網站分爲兩個部分。

的菜單左側面板中，CSS是：

#panel-structure{ 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:300px; 
    height:100%; 
    min-height:100%; 
    z-index:15; 
    background-color:#FFF; 
    text-align:center; 
} 

和右側的容器：

#content-structure{ 
    margin:0 0 0 300px; 
    display:block; 
    overflow: auto; 
    /*position: relative; 
    top:0; left:300px;*/ 
    height:0px; 
    width: -moz-calc(100% - 310px); 
    width: -webkit-calc(100% - 310px); 
    width: -o-calc(100% - 310px); 
    width: calc(100% - 310px); 
} 

這可能是有身體的CSS也很有用：

body{ 
    line-height:160%; 
    font-family:Arial, Helvetica, sans-serif; 
    font:Arial, Helvetica, sans-serif; 
    width: 100%; max-width: 100%; 
    overflow: hidden; 
    /*height:100%; 
    max-height:100%;*/ 
} 

jQuery插件mCustomScroll欄處理VERTICAL滾動。

如果你打開瀏覽器，歌劇，火狐以前的鏈接，你會看到屏幕上的垂直滾動條，你會不會有水平滾動。完美:)

如果您在Safari中打開，你將看不到垂直滾動條，因爲你必須看到它水平滾動...

我與這個掙扎小時了......

我試圖控制寬度，例如，如果body.outerWidth是1500，那麼我會將panel.outerWidth設置爲300，將content.outerWidth設置爲1200.

我只是不明白爲什麼Safari會添加一些水平滾動...

任何hel p會受到歡迎！非常感謝 ！

編輯08/28：

我試着＃內容結構改變爲：

#content-structure{ 
    /*margin:0 0 0 300px; 
    display:block; 
    overflow: auto;*/ 
    position: fixed; 
    top:0px; 
    left:300px; 
    /*position: relative; 
    top:0; left:300px;*/ 
    height:100%; 
    min-height:100%; 
    width: -moz-calc(100% - 310px); 
    width: -webkit-calc(100% - 310px); 
    width: -o-calc(100% - 310px); 
    width: calc(100% - 310px); 
    max-width: -moz-calc(100% - 310px); 
    max-width: -webkit-calc(100% - 310px); 
    max-width: -o-calc(100% - 310px); 
    max-width: calc(100% - 310px); 
} 

但還是這樣滾動...

Answer 1

。它有width: 100%;和padding: 10px 0;兩個輸入

加入此項：

#breaker-data_8, #breaker-data_9 { 
    box-sizing: border-box 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

而且問題解決了:)

UPDATE：

我是什麼原因導致你的問題。您可能從Safari 5.1中看到它不支持calc。

在這片CSS的：

#content-structure{ 
    margin:0 0 0 300px; 
    display:block; 
    overflow: auto; 
    /*position: relative; 
    top:0; left:300px;*/ 
    height:0px; 
    width: -moz-calc(100% - 310px); 
    width: -webkit-calc(100% - 310px); 
    width: -o-calc(100% - 310px); 
    width: calc(100% - 310px); 
} 

如果刪除calc屬性，您將在Chrome和Firefox一樣的，你還得看垂直滾動水平滾動條。

正如我之前所說的，Safari 5.1不支持calc，它支持Safari 6.1及更高版本，所以不要用calc設置width，而是嘗試給它一個像素寬度或者如果你想要它100% - 310px通過javascript來完成。

添加到您的javascript：

$(document).ready(function(){ 
    if ($(window).width() > 1024) 
     $('#content-structure').width($('body').width() - 310); 
    else 
     $('#content-structure').width('98%'); 

    $(window).resize(function(){ 
     if($(window).width() > 1024) 
      $('#content-structure').width($('body').width() - 310); 
     else 
      $('#content-structure').width('98%'); 
    }); 
}); 

的$(window).resize在那裏，以確保當你調整你的風格仍然aplies並修改新的窗口寬度