jquery - 需要修复我的 GroupList(IOS Sticky Headers)控件的特定于 IOS 的样式

Question

我已将所有内容放在示例网站中:

http://grouplist.azurewebsites.net

我无法将它移植到 JSFiddle(我尝试时完全忽略了剪切/粘贴样式，但也许其他人可以尝试)。

基本上我在 jQuery 中构建了一个 IOS 样式组列表，但我的条件 ISO 样式似乎不起作用:

[data-ios="true"] .groupList-Fake
{
    right: 0; /* no scrollbars in iOS devices */
    width: 100%;
}

该站点在标准 Web 上看起来像这样:

但网站在 iPhone 上看起来像这样:

假 header 没有填满控件的整个宽度。

相关的 css 如下(从 .LESS 生成因此有点罗嗦):

.groupList-Wrapper {
    position: relative;
    height: 300px;
    width: 100%;
    margin: 10px;
    overflow: hidden;
}

.groupList-Wrapper .groupList-Header {
    background: #B8C1C8;
    padding: 2px 0 0 12px;
    color: #FFF;
    font: normal 18px/21px Helvetica, Arial, sans-serif;
    text-shadow: 0 1px #646A6E;
    -moz-text-shadow: 0 1px #646A6E;
    -webkit-text-shadow: 0 1px #646A6E;
    border-bottom: 1px solid #989EA4;
    border-top: 1px solid #717D85;
}

.groupList-Wrapper .groupList-Header.groupList-Fake {
    position: absolute;
    top: 0;
    z-index: 1000;
    width: auto;
    left: 0;
    right: 15px;
}

.groupList-Wrapper .groupList {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    position: relative;
    height: 100%;
}

.groupList-Wrapper .groupList .groupList-Group .groupList-Items {
    margin: 0;
    padding: 0;
    top: 80px;
}

.groupList-Wrapper .groupList .groupList-Group .groupList-Items .groupList-Item {
    font: normal 20px/45px Helvetica, Arial, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0 0 0 12px;
    border-top: 1px solid #CCC;
    background-color: #f9faf9;
}

[data-ios="true"] .groupList-Fake {
    right: 0;
    /* no scrollbars in iOS devices */
    width: 100%;
}

我大致基于 IOSList 的 https://github.com/brianhadaway/iOSList但是那个不能满足我的需求(我想要触摸和动量滚动、可变高度元素、列表 和 div 支持等)

我试过让选择器更具体，但没有成功:

[data-ios="true"] .groupList-Wrapper .groupList-Header.groupList-Fake {

Answer 1

原因很简单，答案点被扔掉了:)

CSS 选择器包括 [data-ios="true"]，因为这是来自 Brian Dadaway 控件的样式，但我从头开始编写时缺少“data-ios”属性。

代码中的修复是添加

 if (navigator.userAgent.match(/ipad|iphone|ipod/gi))
 {
     THIS.$wrapper.addClass("ios");
 }

并将 css 更改为:

.groupList-Wrapper.ios .groupList-Header.groupList-Fake
{
    right: 0; /* no scrollbars in iOS devices */
}