아이폰에서 예기치 않은 동작이 발생했습니다.

Question

주문한 목록을 사용하여 매 시간마다 클릭 가능한 상자를 만듭니다. 여기 책상에서 잘 작동하지만, 나는 오늘 밤에 내 아이폰을 시험해보고 이상한 문제에 부딪쳤다.

내 아이폰에서 ... 화면이 좁아지기 때문에 상자가 왼쪽으로 떠있는 것처럼 새 줄로 줄 수 있습니다. 음, 첫 번째 줄에서만 시간을 강조 표시/숨기기 해제 할 수 있습니다. 첫 번째 줄 아래의 시간은 변경할 수 없습니다. 이제, 내 아이폰을 풍경 (넓은보기 영역)으로 돌리면 첫 번째 줄에 더 많은 상자를 표시 할 수 있습니다 ... 같은 일 ... 첫 줄의 모든 내용은 터치로 변경할 수 있지만 그 아래의 항목은 변경할 수 없습니다. . 전화기를 세로에서 가로로 앞뒤로 뒤집을 수 있습니다. 한 시간에 한 시간 씩 변경 한 다음, 첫 번째 라인에 있는지 여부에 따라 시간을 변경합니다.

내 CSS에 문제가 있습니까? 나는 내 책상에서 모든 브라우저를 시험해 보았고 모두 잘 작동한다. 내 아이폰 만이 문제의 원인입니다.

<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 :

HTML - 여기

는 바이올린입니다

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

Answer 1

나는 ol 요소에 clearfix를 적용해야했습니다 ... 모든 것이 이제는 아이폰에서 잘 작동합니다.