2016-06-24 3 views
1

다음 html을 사용하여 선택 상자를 표시합니다. 고정 너비로 ​​선택 상자를 표시하고 옵션이 더 길면 스크롤 막대를보고 싶습니다. 다음은 크롬과 파이어 폭스에서 작동하지만 사파리에서는 작동하지 않습니다.가로 스크롤 막대가 사파리에서 작동하지 않습니다.

아이디어가 있으십니까?

<!DOCTYPE html> 
    <html> 
     <head> 
      <style type="text/css"> 
      select.dualList { 
      width:100%; 
      height:300px; 
      overflow-x: auto; 
      } 
      </style> 
     </head> 
     <body> 
      <table> 
      <tr > 
       <td style="width:100px"> 
        <select multiple="multiple" class="dualList" id="sourceList" > 
         <option value="item11">Item 1 This is my item 1. It should scroll</option> 
         <option value="item22">Item 2fsdsfsdf asdf asfsdas</option> 
         <option value="item33">Item 3</option> 
         <option value="item44">Item 4</option> 
         <option value="item55">Item 5</option> 
        </select> 
       </td> 
      </tr> 
      </table> 
     </body> 
    </html> 

답변

0

우선 Firefox 47 (Windows 10 x86_64)에서는 작동하지 않습니다.

둘째, 많은 사람들이 CSS 규칙을 사용하여 select 요소 만 렌더링한다고 예상하고 싶습니다. 다른 브라우저에서는 다르게 렌더링합니다. 크로스 브라우저 요구 사항은 없습니다. 얼마나 요소를 정확히 렌더링해야합니다.

그 단점은 어떻게 보이는지 모르기 때문에 정확한을 제어 할 것으로 기대할 수 없다는 것입니다. 그런 식으로 통제하려고하면 좌절뿐 아니라 쓸데없는 운동이됩니다. 컨트롤을 브라우저 사용자에게 맡겨 두는 것이 좋습니다. 안심할 수있는 방식으로 렌더링됩니다. 옵션 텍스트가 너무 길면 브라우저가 어떻게 든 수용 할 것입니다. 보통 사람들이 전체 텍스트를 읽을 수 있도록 목록 자체를 수평으로 늘립니다. 당신이 취할 수있는 교훈은 너무 많은 텍스트가없는 것입니다.

사람들에게 문장을 선택하도록 요청하는 경우 아마도 라디오 버튼 (<input type="radio">)이 더 좋은 아이디어일까요?

관련 문제