입력란 오버플로가 Div를 포함하여 이동합니다.

Question

처음에 질문을 작성한 방식으로 일부 투표가 있었기 때문에 예제에 대한 링크에 더 이상 문제가 포함되지 않았으므로 지금 만났던 Chrome 관련 문제에 대해 설명하겠습니다.

크롬의 입력란에서 넘치는 텍스트를 강조 표시 할 때 마우스 오른쪽을 페이지의 오른쪽으로 드래그하면 포함 된 div가 왼쪽으로 밀려납니다. 처음에는이 문제가 입력 필드로 인해 발생한다고 생각했지만 컨테이너가 아닌 동일한 컨테이너 내부에 별도의 div가있는 것으로 나타났습니다.

#container { 
    width: 100px; 
} 

#inputfield { 
    width: 50px; 
} 

#otherthing { 
    width: 300px; 
} 

HTML : 질문의 형식 하다니

<div id="container"> 
    <input type="text" value="Null" /> 
    <div id="otherthing"></div> 
</div> 

Answer 1

내가 그것을 어떤 방법을 클릭, 링크 스팸처럼 보인다. 그 이유는 오른쪽 경계를 오버 플로우하는 요소가있는 해당 컨테이너 내의 모든 텍스트를 효과적으로 강조하기 때문입니다. <div id="selection">을 살펴보십시오.이 값은 컨테이너보다 넓어서 모든 자식의 전체 너비를 경계 상자 밖으로 밀어냅니다. 브라우저는 내용을 자동 스크롤하여 사용자가 강조하고있는 내용을 볼 수 있도록 도와줍니다.

요약하면 CSS가 #selection 요소에 맞게 수정되어 컨테이너와 겹치지 않도록하십시오.