Question

我正在使用有序列表为一天中的每个小时创建可点击的框。它在办公桌上工作正常，但我今晚早些时候在我的iphone上试过并遇到了一个奇怪的问题。

在我的iphone上......由于屏幕较窄，所以当它们向左浮动时，盒子会换行换行。好吧，我只能突出显示/取消第一行中的小时数。低于第一行的任何小时都无法更改。现在，如果我将iphone转为横向（更宽的观看区域），则可以在第一行显示更多的盒子......同样的事情......第一行中的所有内容都可以在触摸时更改，但是下面的任何内容都不能。我可以将手机从纵向翻转到另一个风景......一个小时改变一小时，然后根据第一行不改变另一个小时。

我的CSS会出现问题吗？我在我的办公桌上尝试了所有浏览器，它们都运行良好。只有我的iphone导致了这个问题。

这是小提琴 - http://jsfiddle.net/hL2JC/

html：

<ol id="hour-select">
    <li>12am</li>
    <li>1am</li>
    <li>2am</li>
    <li>3am</li>
    <li>4am</li>
    <li>5am</li>
    <li>6am</li>
    <li>7am</li>
    <li>8am</li>
    <li>9am</li>
    <li>10am</li>
    <li>11am</li>
    <li>12pm</li>
</ol>

css：

#hour-select .hour-selected {
    background: #47a447;
    border:1px #398439 solid;
    color: #ffffff;
}
#hour-select {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#hour-select li {
    margin: 3px;
    padding:5px;
    float: left;
    width: 55px;
    font-size: 15px;
    text-align: center;
    border:1px #cccccc solid;
    background:#e0e0e0;
    cursor:pointer;
}

js：

$('#hour-select li').on('click', function () {
    $(this).toggleClass('hour-selected');
});

Answer 1

我必须对ol元素应用clearfix ...现在iphone上的一切正常。

tophoneClass在iPhone上的意外行为

1 个答案: