html 텍스트를 선택할 수 없습니다

Question

나는 특이한 문제에 부딪 쳤습니다.

내 페이지의 일부 HTML 텍스트는 선택 취소되며 마우스를 꼈을 때 앵커 자손은 인식되지 않습니다 (크롬에서 테스트 됨).

특정 요구 사항을 충족시켜야합니다.

http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/

당신이보다 작은 520px (에 그래서 내 @media CSS의 차기) 더 이상 강조하거나 본체에서 링크를 선택할 수 있습니다에 브라우저 창 폭을 줄일 경우 : 여기 내 예제 페이지입니다 본문.

누구든지이 문제의 원인을 확인할 수 있습니까?

Answer 1

<div id="sidebar>"은 페이지 크기를 줄이면 #main div과 중첩됩니다. 당신 #sidebar이 #main 떨어지는되어 z-index:100 당신이보다 작은 520px로 브라우저 창 폭을 줄일 수

#main { 
padding-top: 0.5em; 
z-index: 100; 
} 

Answer 2

, #main에

은 불가능 #sidebar에서 무언가를 선택 할 수 있습니다 무엇을 추가합니다. #main에 z- 색인을 추가하십시오.

Answer 3

비슷한 문제를 연구하는이 페이지를 발견 한 사용자는 html5boilerplate.com의 HTML5 상용구를 사용하면 포함 된 일부 CSS로 인해 흰색 배경 위에 콘텐츠 텍스트가 선택되었을 때 강조 표시되지 않을 수 있습니다. 특히 ":: selection"에 대한 CSS는 조정하거나 제거해야합니다.

Answer 4

CSS 속성이 position인지 확인하십시오. static;
다른 위치 속성은 주로 "상대적"입니다.
현재 div 옆에있는 div (선택하려고하는 텍스트)가 모든 것을 엉망으로 만들고 있습니다.

Answer 5

요소에 대해 패딩이있는 경우 두 번째 패딩 안쪽에 다른 요소를 절대 배치하면이 문제가 발생합니다.

#container .list li .list-left-left { 
      width: 120px; 
      position: absolute; 
      padding-left: 10px; 
     } 

     #container .list li .list-left { 
      width: 240px; 
      position: absolute; 
      padding-left: 165px; 
     } 

해결 방법은 왼쪽 여백이 아닌 왼쪽 여백을 사용하는 것입니다.