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并修改新的窗口宽度