IE6에서 jQuery 대화 상자에 대한 수정 또는 Workarount- 대화 상자에 양식이 포함 된 경우 주요 레이아웃 문제
-
03-07-2019 - |
문제
양식이 포함 된 jQuery 대화 상자로 작업하고 있습니다. IE6에는 형태 위에 설명 할 수없는 몇 인치의 패딩이 있습니다. 마크 업에서 양식을 제거하면 가장 심각한 레이아웃 문제가 사라집니다. 나는 테마 (기본값), Flora 및 내 Temeroller 테마로 그것을 시도했지만 모두 같은 문제가있는 것 같습니다.
대화 상자 CSS를 다양한 조정하려고 시도했지만 아무런 효과가없는 것 같습니다. 다른 스타일이 적용되는 것을 방지하는 대화 상자가 생성 될 때 많은 양의 인라인 CSS가 작성됩니다.
플로팅, 마진 및 패딩 제거, 인라인 표시 등과 같은 양식 자체에 CSS 속성을 설정하려고 시도했지만 양식이있는 한 추가 간격이 있습니다. 누구든지 이것에 대한 해결 방법을 찾을 수 있었습니까? 차라리 해킹하지 않고 양식 태그가없는 양식 컨트롤이 있습니다.
감사.
해결책
기존 사이트, 포럼, 위젯 등에 대한 CSS 테마를 만들어야 할 때마다 나는 항상 모든 스타일 시트를 제거하고 모든 주요 HTML DOM 요소에 대해 0으로 0으로 패딩하는 것으로 시작합니다. 이것은 인라인 CSS와 관련하여 특히 중요합니다.
시도해야 할 것은 폼 요소 자체의 인라인 CS를 제거하는 것입니다. 그런 다음 다음과 같은 것을 시도하십시오.
form {
margin: 0;
padding: 0;
overflow: hidden;
}
IE6의 길들이기 오버 플로우는 종종 많은 마진 문제를 해결합니다. 다음 스타일을 사용하여 모든 HTML 요소에 테두리를 임시로 설정하여 이전 요소가 양식 공간으로 넘쳐나는지 확인하십시오.
* {
border: solid 1px #FF0000;
}
양식에 경계가 부과되는 것을 보면 해당 요소의 오버플로를 억제하려고 시도해야합니다.
다른 팁
나는 버튼과 설명 할 수없는 여백으로 비슷한 문제를 겪었습니다. IE6에는 부모 요소의 여백을 물려받는 몇 가지 요소가 있습니다. 매우 기괴한 ...
이 수정 사항을 시도하십시오. http://blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html
다음과 같은 것을 시도하십시오.
#yourDiv { padding:1.2em; margin-right:2.4em; }
여기서 #yourdiv는 태그가 포함 된 DIV의 ID입니다 (입력 에이 문제가있었습니다).