어떻게 해야 하는 표준 모드 뿐만 아니라 작업 쿼크 모드?

StackOverflow https://stackoverflow.com/questions/416094

문제

다음과 같은 Html 좋은 작품에 대한 나 FireFox 에서는 IE7/8(과 함께 또는없이 스타일의 태그)

<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        Input.quirks
        {
            margin: 1px 0px 1px 0px;
            border: solid black 1px;
        }
    </style>
</head>
<body>
Should work in Quirks Mode <br />
    <input class="quirks" type="text" style="width: 300px;" /><br />
    <input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
    <input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>

그러나 나의 부재 DocType 의 맨 위에서 말했다 HTML 일으키는 모두 모두 브라우저에서 일하기"단점"모드가 있습니다.

나이가 나쁜 것입니다.

생 DocTypes 하지만 발견되지 않았 DocType/HTML 조합하는 수익률이 정확한 렌더링에서 모두 브라우저입니다.

다른 것보다는"단점"모드는 원인은 브라우저를 다르게 반응하여 설정하려고의 폭 textbox.이것으로 이어질 것으로 보인 위치할 수 있는 올바른 제에 대한 지침 중 FF 또는 IE 갑자기 다른 것입니다 실패입니다.

일부 세부 사항...

1.> 목적 여기에는 3 개의 행이 나타나야 될 것 같은 폭 정확하게 렌더링할 때에는 각각의 브라우저입니다.그것은 nessecary 는 렌더링된 폭은 동일한 브라우저에서,단순히 나타나는 올바르게 정당화/alighned 내부의 각 브라우저입니다.

2.> 이미지 참조은 스페이서 이미지 3 픽셀 1 개(이에 대한 대안 것도 좋은)

3.> 내가 원하지 않을 소개하는 테이블의 경우에 모두 가능합니다.

그것은 쿼크 모드만 모드에 걸쳐 일관된 브라우저입니다.나는 걱정이 그러나 마우스 오른쪽 버튼을 클릭 IE8 또는 실제로 어떤 미래의 브라우저 쿼크 모드지 않을 것이 기본입니다.

나는 무엇을 해야 합니까?어떻게 지정 DocType(그리고 어쩌면 변경 내 html)를 만들 것입니다에 걸쳐 일관성있는 모양을 브라우저?

도움이 되었습니까?

해결책

의 주요 차이점은"단점"및"기준을 준수"모드는 다른"상의 모델"이 결과는 다른 방법으로 계산의 크기에 따라 width/height,패딩,여백과 국경을 설정합니다.에서 표준을 준수하는 효과적인 폭과 높이의 상자가 계산에 의해 추가 이러한 모든 매개변수(주시기 바랍 웹 검색에 대한 자세).

그래서 때문에,당신은 지정 1px-border,당신의 첫번째 필드를 입력 될 것입니다 302px 와이드(300px+2*1 픽셀의 테두리는 왼쪽과 오른쪽).의 불일치 사 FF 고 즉,당신이 언급에 의해 발생할 수 있습 다른"기본값으로는""padding"설정입니다.나는 그냥 테스트 코드 DOCTYPE 없 패딩에 대한 입력 필드를 모두 브라우저 렌더링된 그것은 동일한 방법입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

지금,스페이지:를 사용하지 않는다.당신은 그들이 필요하지 않습니다.그냥 사용하여 오른쪽 여백의"3px"입력에 대한 분야에 대한 차이입니다.

input.quirks {
    margin: 1px 3px 1px 0px;  /* 3px right margin */
    border: solid black 1px;
    padding: 0px;             /* so that IE and FF use the same padding */
}

다음 수학을 결정이 올바른"width"설정하도록 합의 모든 너비(includung 패딩,테두리 및 여백!) 각 행에서 같은,예를 들어:

300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px

알"5px"로 구성되어 있 3px-오른쪽 여백과 2 번경(1px).

거기 당신은 이동합니다.를 사용하려면 다른 패딩에 대한 더 좋은 모양과 느낌,단지 그것을 포함에서 당신의 계산!

다른 팁

이것은 당신의 doctype를 올바르게 얻는 것에 대한 훌륭한 기사입니다.
http://www.alistapart.com/stories/doctype/

귀하의 문제는 대부분 IE와 Firefox의 기본값으로 인해 주로 기본값으로 인해 발생 했으므로 CSS 재설정 패딩과 같은 것들에 대한 값을 포함하는 스타일 시트는 모든 브라우저의 기본값을 효과적으로 지우므로 모두 비슷하게 렌더링합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top