1. xhtml의 스크롤 막대 색상 문제
원본 HTML에서는 다음과 같이 전체 페이지의 스크롤 막대를 정의할 수 있습니다.
body{
scrollbar -3dlight-color:#D4D0C8; /*- 왼쪽 외부-*/
scrollbar-highlight-color:#fff; /*- 왼쪽에서 두 번째-*/
스크롤바 -face- 색상:#E4E4E4; /*-face-*/
스크롤바-화살표-색상:#666; /*-arrow-*/
스크롤바-그림자-색상:# 808080; / *- 오른쪽에서 두 번째-*/
scrollbar-darkshadow-color:#D7DCE0 /*- 오른쪽에서 첫 번째-*/
scrollbar-base-color:# D7DCE0; /*- 기본 색상- */
scrollbar-track-color:#;/*- Slider-*/
}
그러나 동일한 코드는 xhtml에서 사용되었습니다. 많은 좋은 친구들이 같은 문제에 직면했다고 생각합니다.
그럼 xhtml에서 스크롤바 스타일을 어떻게 적용하나요? 다음 코드를 보세요:
html{
scrollbar-3dlight-color:#D4D0C8; /*- 가장 바깥쪽 왼쪽-*/
scrollbar-highlight-color:# fff ; /*- 왼쪽에서 두 번째-*/
scrollbar-face-color:#E4E4E4 /*- Face-*/
scrollbar-arrow-color:#666; - 화살표 -*/
scrollbar-shadow-color:#808080; /*- 오른쪽에서 두 번째-*/
scrollbar-darkshadow-color:#D7DCE0 /*- 첫 번째 오른쪽-*/
scrollbar-base-color:#D7DCE0; /*- 기본 색상-*/
scrollbar-track-color:#;/*- 슬라이드-*/
}
이 코드와 이전 단락의 유일한 차이점은 css로 정의된 요소 중 하나는 body이고 다른 하나는 html이라는 것입니다. 다시 테스트하고 html 페이지의 "본문"을 "html"로 변경하여 테스트하고 효과가 여전히 달성될 수 있는지 확인하겠습니다. 그렇다면 왜?
아래 그림을 보시죠. 
HTML의 가장 기본적인 DOM 트리 구조입니다.
html과 xhtml의 정의를 살펴보겠습니다.
HTML(Hyper Text Markup Language, HyperText Markup Language), HyperText Markup Language는 인터넷에서 널리 사용됩니다. . HTML은 텍스트 기반이 렌더링되는 방식과 하이퍼링크가 다른 페이지에 연결되는 방식을 설명합니다.
XHTML(Extensible Hypertext Markup Language, Extensible Hypertext Markup Language)은 HTML과 표현 방식은 비슷하지만 구문이 더 엄격한 마크업 언어입니다. 상속 관계 측면에서 볼 때 HTML은 SGML 기반의 응용 프로그램으로 매우 유연하며, XHTML은 SGML의 하위 집합인 XML을 기반으로 합니다. XHTML 1.0은 2000년 1월 26일에 W3C 권장 사항이 되었습니다.
말 그대로 xhtml은 html보다 x가 하나 더 많은데, 이 x는 실제로 xml입니다. 왜 xml을 추가해야 할까요? 사실 가장 근본적인 이유는 html을 좀 더 구조화하고 표준화하기 위한 것입니다(html은 정말 형편없기 때문이죠).
다시 돌아가서 위의 구조 트리를 살펴보겠습니다. html에서 정의한 것은 본문입니다. html은 표준이 아니기 때문에 이것이 적용될 수 있지만 xhtml에서는 작동하지 않습니다. 분명히, body 태그 자체는 루트 요소가 아니며, html만이 루트 요소이고, 페이지의 스크롤 막대도 루트 요소에 속하므로 이것이 body에 대한 정의가 아무런 효과가 없는 이유입니다. 우리가 정의하는 것은 하위 요소일 뿐입니다. 자, 우리는 원리를 알고 있습니다. "body" 또는 "xhtml"의 정의를 "*"로 바꾸면 실험을 해보겠습니다.
*{
scrollbar-3dlight-color: #D4D0C8; /*- 왼쪽 외부-*/
scrollbar-highlight-color:#fff; /*- 왼쪽에서 두 번째-*/
scrollbar-face-color:#E4E4E4; /*- Face-*/
scrollbar-arrow-color:#666; /*- Arrow-*/
scrollbar-shadow-color:#808080 /*- 오른쪽에서 두 번째; -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 오른쪽 하나-*/
scrollbar-base-color:#D7DCE0; /*- 기본 색상-*/
scrollbar-track-color:#;/*- Slider-*/
}
는 html과 xhtml 모두에 전달됩니다. *는 모든 태그를 정의하기 때문입니다. 페이지에는 물론 "html" 태그도 포함됩니다.
(ps: 사실 html과 xhtml의 차이는 XHTML 1.0 전환 문서 유형이 있는지 여부의 차이만큼 크지 않지만, 페이지에서 XHTML 1.0 전환 문서 유형을 제거하면 다음과 같은 결과가 발생합니다. 페이지에는 doctype이 없으며 기본 표시 모드는 html4.01이지만 XHTML 1.0 전환 doctype을 HTML 4.01 doctype으로 변경해야 합니다. 이 페이지의 표준은 html이지만 동일한 페이지 정의 본문은 아무런 영향을 미치지 않습니다. 4.01)
2 , xhtml 아래 프레임 페이지의 가로 스크롤 막대 문제
IE6을 사용하여 프레임이 있는 xhtml 페이지를 탐색할 때 기본적으로 가로 및 세로 스크롤 막대가 함께 나타납니다. 는 IE6의 버그이고 Firefox에 있습니다. 일반적으로 그 이유는 XHTML 1.0 전환 문서 유형 해석의 결함 때문입니다.
이 버그에 대한 해결책은 일반적으로 3가지가 있습니다.
방법 1:
코드:
html { Overflow-y: scroll }
원리: IE의 수직 스크롤 막대를 강제로 표시하고 수평 스크롤 막대는 무시합니다.
장점: 이 문제를 완전히 해결하여 완전한 XHTML 문서 유형을 유지할 수 있습니다.
단점: 페이지에 세로 스크롤 막대가 필요하지 않은 경우에도 세로 스크롤 막대가 나타납니다.
방법 2:
코드:
html { Overflow-x: Hidden; Overflow-y: auto; }
원칙: 가로 스크롤을 숨기고, 세로 스크롤은 내용에 따라 조정됩니다.
장점: 이 문제를 시각적으로 해결하세요. 필요하지 않은 경우 세로 스크롤 막대가 강제로 표시되지 않습니다.
단점: 가로 스크롤 막대만 숨깁니다. 페이지에 실제로 가로 스크롤 막대가 필요한 경우 사용자가 가로 스크롤을 할 수 없기 때문에 화면 외부의 콘텐츠가 표시되지 않습니다.
방법 3:
코드:
body { margin-right: -15px; margin-bottom: -15px }
원칙: IE가 이 정확한 값을 추가하면 스크롤 막대가 필요하다는 환상이 제거됩니다.
장점: 이 문제는 시각적으로 해결되며, 내용에 따라 세로 스크롤이 적응됩니다.
단점: 15px 여백은 '인위적으로 생성'되므로 채워진 화면 영역을 사용할 수 없습니다.
위 내용은 HTML의 스크롤 막대 정보/스크롤 막대 제거의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
