Overflow-x:hidden이 모바일 브라우저에서 작동하지 않음
이번 문제에서는 웹사이트의 검은색 메뉴 표시줄이 모바일에서 창 가장자리 너머로 확장됩니다. Overflow-x:hidden을 본문에 적용했음에도 불구하고 브라우저. 이 과도한 공백은 설명할 수 없으며 HTML 구조 외부에 있는 것처럼 보입니다.
해결책:
이 문제를 해결하기 위해 저자는 웹사이트 콘텐츠를 래퍼 div 내에 캡슐화하고 본문이나 HTML 대신 래퍼에 Overflow-x:hidden을 적용합니다.
분명히 브라우저는 뷰포트 메타 태그의 우선순위를 지정하고 html 및 본문 요소의 오버플로 속성을 무시합니다. 래퍼 div 내에 오버플로 속성을 배치하면 제약 조건이 효과적으로 적용되어 콘텐츠 확장이 제한됩니다. 또한 래퍼 div에 상대적인 위치를 추가해야 할 수도 있습니다.
예:
<body> <div>
#wrapper {
overflow-x: hidden;
position: relative;
}위 내용은 내 모바일 메뉴 표시줄에서 `overflow-x:hidden`이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
