Doctype 및 CSS

doctype transitional을 가진 다음 코드를 가지고 있지만 엄격하게 설정하면 이미지의 위치가 변경되고 위쪽으로 이동합니다. 기본 이슈를 이해하는데 도움을 주시겠습니까? 그리고 다른 doctype 사이에서 이러한 유형의 다른 CSS 충돌 목록을 찾을 수있는 곳을 찾아주십시오.Doctype 및 CSS

엄격 모드에서는 사용할 수없는 HTML 태그가 거의 없지만 CSS 충돌에 대해 자세히 알고 있습니다. 쿼크 모드와 거의 표준 모드 (그래서 폰트 문자와 같은 라인의 동일한 세트에 배치되어 인라인 내용이다) 이미지에서

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<body> 
<style type="text/css"> 
span.check:before { content: url("http://i41.tinypic.com/2rxea7d.png"); } 
</style> 
<table> 
<tr> 
<th>Ruby on Rails</th> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
</tr> 
<tr> 
<th>Road on Rails</th> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
</tr> 
</table> 
</body> 
</html>

출처

2012-01-30 Shawn Taylor

어떤 브라우저에서 사용할 수 있습니까? – vvondra

FX 9.0.1 및 최신 Chrome에는 있지만 다른 사람에 대해서는 확실하지 않습니다. –

읽기 : http://www.quirksmode.org/css/quirksmode.html – zvona

는 zero-height positioned at their baseline이다.

표준 모드에서 생성 된 이미지의 vertical-align 속성을 트위 킹하거나 display: block으로 설정하여 동일한 효과를 얻을 수 있습니다.

출처

2012-01-30 12:59:14 Quentin

display : block ; 내용 아래에 내용이 있지만 아무것도 변경하지 않았으며 두 가지 유형의 차이는 그대로 유지됩니다. –

doctype을 변경하면 인터넷 익스플로러의 특정 버전이 표준 모드에서 호환 모드로 작동하는 모드가 변경 될 것으로 예상됩니다. Internet Explorer는 테두리 상자 모델을 해석하는 방법을 수정했지만 DOCTYPE에 따라 이전 방법과 수정 된 방법을 전환 할 수있었습니다.

출처

2012-01-30 13:01:29

Doctype 및 CSS

답변

관련 문제