Safari가 다시 그린 후 CSS 테이블 행(tr) 높이 속성을 무시하는 이유는 무엇입니까?
-
06-07-2019 - |
문제
Safari에서 GWT(Google Web Toolkit) 생성 HTML 테이블에 CSS 스타일을 적용하는 데 어려움을 겪고 있습니다.특히 테이블을 다시 그리기를 실행한 후에는 Safari가 테이블 행의 높이 속성을 존중하도록 할 수 없습니다.
다음 기본 예는 문제를 보여줍니다.
<html>
<head>
<style type="text/css">
tr {
height: 50px;
font-weight: bold; /* added to prove that other style rules are re-applied when enabling css again */
}
</style>
</head>
<body>
<table border="1px">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
</body>
</html>
Safari에서 이 페이지를 열면 처음에는 올바르게 렌더링됩니다.그런 다음 개발 메뉴에서 "스타일 비활성화"를 선택한 다음 즉시 다시 활성화하면 높이 규칙이 무시되고 테이블 행의 높이가 "자동"으로 설정된 것처럼 계산됩니다.
이것이 바로 내 GWT FlexTable에서 프로그래밍 방식으로 행/셀을 추가하거나 제거할 때 발생하는 현상입니다.
이 동작의 원인과 전체 테이블에 고정 높이를 설정할 필요가 없는 해결 방법이 있는지 아는 사람이 있습니까?
세부:Mac OSX Leopard에서 Safari 버전 4.0.3(5531.9) 실행
이 문제는 GWT 호스팅 모드 브라우저(Mac에서 실행할 때 기본적으로 Safari임)를 사용하여도 발생합니다.
해결책
TR
W3C 사양에는 태그에 높이 속성이 없습니다.높이를 설정해야 합니다. TD
대신 태그가 포함되어 있습니다.
다른 팁
WebKit은 성능에 최적화되어 있으며 때로는 필요하지 않다고 판단되는 경우 특정 영역을 다시 그리는 것을 거부합니다.예를 들어 전체 다시 그리기를 트리거하여 이 문제를 해결할 수 있습니다.창 크기를 1px 및 1px 뒤로 조정합니다(좀 더 똑똑한 방법이 있어야 함).