접이식 테이블 행 요소 버그_HTML/Xhtml_웹페이지 제작

예를 들어 보겠습니다. 코드는 다음과 같이 매우 간단합니다.

코드 복사

코드는 다음과 같습니다.

dd	dds
ss

이렇게 하면 두 개의 행과 두 개의 열이 있는 테이블은 어떤 브라우저에서도 오류를 표시하지 않습니다. 그러나 다음 CSS를 추가하면 상황이 달라집니다.

코드 복사코드는 다음과 같습니다.

문제가 있을 것 같지만 실제로는 문제가 보이지 않으니 걱정하지 마세요. 이때 표면적으로는 페이지 레이아웃이 엉망이 되지 않을 것입니다.
겹치는 것이 보이지 않습니다.
겉으로는 문제가 없지만 속일 생각은 없습니다. , 그러나 이제 IE 개발 도구를 사용하면 레이아웃이 무엇인지 알 수 있습니다.



주의하세요. 두 사진의 차이점과 유사점을 확인하세요. 왼쪽 보기에 있는 파란색 선 원을 확인하세요. 이 도구의 기능은 오른쪽에 있는 요소를 클릭하는 것이며 웹 페이지에서 와이어프레임으로 구성됩니다. > 그런데 두 개의 서로 다른 요소를 두 번 클릭했다는 점에 유의하세요. 외관 스타일에 영향을 주지 않고 완전히 올바르게 렌더링됩니다. 이때 숨겨진 위험이 묻혀 있다고 생각하지 마십시오. 실제로 2열 테이블을 사용할 때 이 문제가 발생했습니다. 첫 번째 행은 드래그할 수 있는 창 제목 표시줄이고 두 번째 행은 메인 뷰를 만드는데 나중에 테이블의 두 번째 행이 첫 번째 행을 덮고 있음을 발견했습니다. 이 현상을 해결하려면 tr에서 위치를 제거하면 됩니다.
3. 이런 관점에서는
CSS를 작성할 때 일부 재설정을 사용하는지 모르겠습니다. , 이것이 제가 하는 일입니다. NetBeans의 CSS 재설정은 템플릿에 저장되며 각 CSS 파일의 헤더에는 다음과 같은 단락이 있습니다.





코드 복사

코드는 다음과 같습니다. /* TODO 이 샘플 스타일을 사용자 정의하세요

구문 권장 사항 http:// www.w3.org/TR/REC-CSS2/

*/

html, 본문, div, 범위, 애플릿, 개체, iframe,
h1, h2, h3, h4, h5, h6, p , blockquote, pre,
a, abbr, 약어, 주소, big, cite, 코드,
del, dfn, em, 글꼴, img, ins, kbd, q, s, samp,
small, Strike, Strong, sub, sup, tt, var,
b, u, i, center ,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
여백: 0;
패딩: 0;
테두리: 0;
개요: 0;
글꼴 -size: 12px;
수직 정렬: 기준선;
배경: 투명;

}
body {
line-height: 1;
}
ol , ul {
목록 스타일: 없음;
}
blockquote, q {
따옴표: 없음;
}
blockquote:before, blockquote:after,
q: before, q:after {
content: none;
}
/* 요소에 포커스가 있을 때의 스타일 */
:focus {
개요: 0;
}
/* 특수 텍스트의 스타일! */
ins {
text-design: none;
}
del {
text-design: line-through;
}
/* 얇은 선 테이블 스타일*/
테이블 {
border-collapse:collapse ;
border-spacing: 0;
}


요소를 절대적으로 배치하려면 먼저 상위 요소의 위치를 ​​지정해야 한다는 사실은 누구나 알고 있습니다. 예를 들어 하위 요소가 절대적일 수 있도록 position:relative를 설정한 다음 위쪽과 왼쪽에 위치를 지정해야 합니다.

그래서 저는 이것이 너무 번거롭다고 생각했습니다. 모든 요소에 대해 position:relative를 설정한 다음 position:absolute를 절대 위치로 변경하는 것이 좋을 것 같습니다. 이렇게 하면 하나씩 설정할 필요가 없습니다.

그래서 이 글에서 언급한 문제가 발생합니다. 모든 요소에 대해 position:relative를 설정했기 때문에 테이블에 문제가 있으므로 이 접근 방식은 바람직하지 않습니다. 다른 렌더링 문제가 발생할 수 있습니다.

이 기사는 실제로 레이아웃에 관한 것이지만 이 문제는 실제로 레이아웃이 아닌 IE의 버그입니다. 문제입니다. 다음에는 레이아웃에 대해 이야기하겠습니다. 그런데, 이건 정말 이상한 버그입니다.