CSS滚动在移动设备上无法正常显示

Question

我的帖子底部的代码控制着jQuery Mobile中我的页面<div>中的<div>。我有这个div来制作一个表滚动，因为它在页面上水平溢出。然而，它显示在此屏幕截图中：

当它垂直定向时会出现同样的问题，但是这个视图更好地说明了这一点。我也侧向滚动div以更好地说明两个边界。我希望div只是在移动设备上填充页面的整个宽度，因为它在较大的屏幕上正确显示，但是如果它溢出，我希望它水平滚动。除了尝试使用和不使用overflow: scroll;的代码之外，我还尝试了overflow: auto;和-webkit-overflow-scrolling: touch;。我尝试过设置宽度的方法尚无效，包括其他地方建议的width: 100%;和position: absolute; left: 0; right: 0;。

CSS：

@media only screen and (min-width: 1025px){
    .ui-page {
    width: 960px !important;
    margin: 0 auto !important;
    position: relative !important;
        border-right: 5px #111111 outset !important;
        border-left: 5px #111111 outset !important;
        border-bottom: none;
    }
}

@media only screen and (max-width: 1024px){
    .tblscroll {
        width: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

简化的HTML：

<div data-role="page" id="resultsmain" data-title="Survey Results">
    <div data-role="header"><h1>Title</h1></div>
    <div data-role="content">text
        <div class="tblscroll">
            <table>
                ...table information...
            </table>
        </div>
    </div>
</div>

Answer 1

您可以尝试在div元素宽度定义宽度周围使用CSS显示块并调整百分比。

Answer 2

好像它本身就是问题所在。

我会将表格宽度设置为100％，并修复不会增长或缩小的行

  

表格{宽度：100％; }

Answer 3

这根本没有帮助，但我今天装了它，它完美无缺。我从昨天到今天都没有改变，所以它一定是某种缓存问题（即使我已经清除了我的移动缓存）。