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

同时拥有 body 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 bar 处理垂直滚动。

如果您在 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;
}

问题解决了:)

更新：

我知道是什么导致了您的问题。您可能会在不支持 calc 的 Safari 5.1 中看到它。

在这段 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 中拥有相同的属性，您必须水平滚动才能看到垂直滚动。

正如我之前所说，calc 在 Safari 5.1 中不受支持，它在 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 用于确保当您调整窗口大小时您的样式仍然适用并修改为新的窗口宽度