내 모바일 메뉴 표시줄에서 `overflow-x:hidden`이 작동하지 않는 이유는 무엇입니까?

Overflow-x:hidden이 모바일 브라우저에서 작동하지 않음

이번 문제에서는 웹사이트의 검은색 메뉴 표시줄이 모바일에서 창 가장자리 너머로 확장됩니다. Overflow-x:hidden을 본문에 적용했음에도 불구하고 브라우저. 이 과도한 공백은 설명할 수 없으며 HTML 구조 외부에 있는 것처럼 보입니다.

해결책:

이 문제를 해결하기 위해 저자는 웹사이트 콘텐츠를 래퍼 div 내에 캡슐화하고 본문이나 HTML 대신 래퍼에 Overflow-x:hidden을 적용합니다.

분명히 브라우저는 뷰포트 메타 태그의 우선순위를 지정하고 html 및 본문 요소의 오버플로 속성을 무시합니다. 래퍼 div 내에 오버플로 속성을 배치하면 제약 조건이 효과적으로 적용되어 콘텐츠 확장이 제한됩니다. 또한 래퍼 div에 상대적인 위치를 추가해야 할 수도 있습니다.

예:

  <div><pre class="brush:php;toolbar:false">#wrapper {
  overflow-x: hidden;
  position: relative;
}