css - 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 处理 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;
}

问题解决了:)

更新:

我知道是什么导致了您的问题。您可能会在不支持 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 是为了确保当您调整窗口大小时您的样式仍然适用并修改为新的窗口宽度