CSS 표준: 수직 정렬 속성_HTML/Xhtml_웹 페이지 제작

원문: http://www.mikkolee.com/13
지난 며칠 동안 수직 정렬 속성을 주의 깊게 연구한 결과, 매우 "고급" CSS 표준이 실제로 다양한 브라우저에서 다르게 동작한다는 사실에 놀랐습니다.
Vertical-align에는 기준선 하위 만찬 상단 텍스트-상단 하단 텍스트-하단 중간 및 다양한 길이 값(%, em, ex 등)을 포함하여 많은 값이 있습니다. 제가 가장 과장되었다고 생각하는 가치인 바닥을 먼저 보여드리겠습니다. 코드는 다음과 같습니다:
p {
글꼴 크기: 18px;
줄 높이: 36px;
글꼴 계열: Tahoma, sans-serif;
}
img {
수직 정렬: 하단 ;
}
그럼 다양한 브라우저에서 이 CSS의 효과를 살펴보겠습니다. (상대 위치를 명확하게 볼 수 있도록 의도적으로 이렇게 그림을 만들었습니다.)





글쎄, 이 결과는 사실 매우 놀랍습니다. 일반적으로 IE보다 Firefox가 더 정확하게 설명할 것이라고 생각하지만, Opera를 살펴보니 Safari/Win이 IE와 동일하다는 것을 알았습니다. 파이어폭스의 측면. 솔직히 말해서 무슨 일이 일어나고 있는지 모르겠습니다.
"CSS Definitive Guide (Second Edition)"를 주의 깊게 연구하고 W3C에 문의한 후 직접 수직 정렬에 대한 다이어그램을 만들었습니다.

W3C 정의에 따르면 인라인 요소의 수직 정렬이 다음과 같이 설정된 경우: 기준선, 상단 및 하단이 사용되는 경우 요소의 기준선(또는 중간, 상단, 하단)은 주변 요소의 동일한 위치에 정렬됩니다(예: 그림의 상단이 주변 텍스트의 상단에 정렬됨). text-top 및 text-bottom을 사용하는 경우 요소의 상단(또는 하단)이 주변 요소의 텍스트 상단(또는 텍스트 하단)에 맞춰 정렬됩니다. 기준선을 기준으로 길이(%, em, ex)가 위로 이동하므로 양수는 올라가고 음수는 내려갑니다. 중간에 있으면 요소의 중심이 주변 요소의 중심과 정렬됩니다. 여기서 "중심"의 정의는 다음과 같습니다. 그림은 물론 높이의 절반이고 텍스트는 기준선을 기준으로 0.5ex 위로 이동해야 합니다. 즉, 소문자 "x"의 정확한 중심. 그러나 많은 브라우저에서는 ex의 단위를 0.5em으로 정의하는 경우가 많기 때문에 반드시 x의 정확한 중심이 아닐 수도 있습니다(예를 들어 위 그림에서 x의 높이는 10px이고 em은 18px이어야 하므로 두 값이 다릅니다).
그런데 위의 지침을 따랐음에도 불구하고 각 브라우저마다 해석이 너무 다르다는 사실이 마음을 흔들었습니다. 나는 이것이 왜 그런지 조사하기에는 너무 게으르다. 일반적으로 말하면 글꼴의 각 줄 위치에 대한 정의가 다르기 때문에 이 문제는 수직 정렬뿐만 아니라 인라인 텍스트와 인라인 이미지의 구조에 대한 브라우저의 해석과도 관련이 있습니다. 할 일이 많습니다.
마지막으로 각 브라우저가 서로 다른 수직 정렬 값을 어떻게 해석하는지 확인할 수 있는 테스트 페이지를 제공하겠습니다.
http://www.mikkolee.com/weblab/001_vertical/
각 브라우저가 완전히 다르기 때문에 중간 또는 텍스트 상단 등 다른 값을 테스트할 수 있습니다. 어떻게 생각하는지 토론해 보세요~~