编辑08/28：

Question

我的问题发生在大型桌面屏幕上。

你可以在这里找到问题的样本==＆gt; 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卷轴。

如果您在Chrome，Opera，Firefox中打开上一个链接，您将在屏幕上看到垂直滚动条，而您不会进行水平滚动。完美:)）

如果你在Safari中打开，你将看不到垂直滚动条，因为你必须水平滚动才能看到它......

我现在挣扎了几个小时......

我试图控制宽度，例如，如果body.outerWidth是1500，那么我将panel.outerWidth设置为300，content.outerWidth设置为1200.

我只是不明白为什么Safari会添加一些水平滚动...

欢迎任何帮助！非常感谢！

编辑08/28：

我尝试将#content-structure更改为：

#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;
}

问题解决了:)）

<强>更新

我得到了导致你问题的原因。您可能会在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，而是尝试给它一个宽度（以像素为单位）或者如果你想通过javascript 100% - 310px做到这一点。

将此添加到您的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用于确保在调整窗口大小时样式仍然适用并修改为新窗口宽度

Safari水平滚动

编辑08/28：

1 个答案: