CSS 조작을 고려할 때 블록 요소를 포함하는 인라인 요소가 유효한 HTML로 간주될 수 있습니까?

난제: 삽입된 블록 요소를 사용하여 블록 요소를 인라인으로 허용 가능한 변환 해결

HTML 마크업 및 CSS 스타일링 영역에서는 인라인 요소 내의 블록 요소는 확립된 웹 표준을 위반합니다. 그러나 반대 시나리오가 발생하면 특이한 상황이 발생합니다. 즉, 블록 요소가 포함된 인라인 요소입니다.

다음 스니펫을 고려하세요.

<div><p>This is a paragraph</p></div>

이 마크업은 수수께끼 같은 CSS가 나타날 때까지 완벽하게 유효한 것처럼 보입니다. 아래가 적용됩니다:

div {
   display:inline;
}

결과 웹페이지를 검토할 때 수수께끼가 발생합니다. 인라인 div 요소는 이제 블록 수준 p 요소를 포함하며 잠재적으로 기존 HTML 및 CSS 규칙을 무시합니다.

타당성 모호함

타당성에 대한 질문이 가장 중요해졌습니다. 페이지 요소가 여전히 웹 표준을 준수합니까? 초기 마크업은 유효하지만 CSS가 요소를 무효화한다고 주장하는 사람도 있고, CSS 적용 후 유효성을 판단해야 한다고 주장하는 사람도 있습니다.

CSS 사양 수수께끼

CSS 2.1 사양은 이 특정 시나리오에 대한 비밀스러운 정의를 제공합니다.

"인라인 상자에 인플로우가 포함된 경우 블록 수준 상자, 인라인 상자 [...]는 블록 수준 상자 주위에서 분리되어 인라인 상자를 두 개의 상자로 분할합니다..."

이 설명은 인라인 요소가 두 개로 분할됨을 의미합니다. , 기본적으로 포함된 블록 요소 주위에 익명의 블록 상자를 생성합니다. 그러나 사양은 구현 및 브라우저 간 일관성과 관련하여 답이 없는 질문을 남깁니다.

브라우저 구현 불확실성

CSS 사양은 동작을 정의하려고 시도하지만 구현은 다양한 방식으로 이루어집니다. 브라우저는 여전히 추측의 문제입니다. 일부 브라우저는 사양을 따를 수 있지만 다른 브라우저는 블록 요소가 포함된 인라인 요소 주위에 테두리를 렌더링하는 등 대체 구현을 나타낼 수 있습니다.

HTML5 예외

복잡성 추가 이러한 상황에 따라 HTML5에서는 꼬리표. 이 예외는 클릭 가능한 콘텐츠의 큰 블록을 만들려는 개발자에게 허점을 제공합니다.

결론

블록 요소를 삽입된 블록 요소가 있는 인라인으로 변환하는 적법성은 여전히 ​​문제로 남아 있습니다. 토론의. CSS 사양은 프레임워크를 제공하지만 브라우저에 따라 프레임워크의 해석과 구현이 다를 수 있습니다. 따라서 개발자는 특히 브라우저 간 호환성 고려 사항과 관련하여 이 기술을 사용할 때 주의를 기울여야 합니다.

위 내용은 CSS 조작을 고려할 때 블록 요소를 포함하는 인라인 요소가 유효한 HTML로 간주될 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!