toggleClass iPhone上的意外行爲

我正在使用有序列表爲一天中的每個小時創建可點擊的框。它在桌面正常工作，但我今晚在我的iPhone上嘗試過，並遇到了一個奇怪的問題。toggleClass 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'); 
});

來源

2014-03-06 user756659

我只是試圖在我的iPhone出於好奇和小提琴工作正常。在網站上它沒有。猜測我需要比我想象的更多地進行研究，但仍然有建議。 – user756659

我必須將一個clearfix應用於ol元素......現在，一切正常工作在iPhone上。

來源

2014-03-06 17:41:32 user756659

toggleClass iPhone上的意外行爲

回答

相關問題