jQuery doctype CSS 버그 IE 6 & 7 -Quirks 모드

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

  •  19-09-2019
  •  | 
  •  

문제

작동해야 할 때 이상한 행동 :

문제는 DocType를 선언하지 않으면 CSS가 IE 6 & 7에서 작동하지만 DocType를 선언하면 작동하지 않습니다. 왜???

jQuery :

$('tr:first-child').children().css({
   'width': settings.minWidth + 'px',
   'height': settings.tableHeaderHeight + 'px',
   'overflow': 'hidden',
   'white-space': 'nowrap',
   'color': 'blue'
});

html w/ doctype - 테이블 헤더 차이를 보려면 Firefox 및 IE 6 & 7에서보십시오.

HTML WO/ DOCTYPE - 테이블 헤더 차이를 보려면 Firefox 및 IE 6 & 7에서보십시오.

내가 선언하고있는 doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

따라서 유용한 의견을 마친 후 나는 DocType를 추가하지 않을 때 Quirks 모드가 사용되고 있음을 발견했습니다. 이는 내가 원하는 CSS 효과이지만 DocType, ugh !!!

주변의 일이 있습니까? 제안?

솔루션, 그래 !!!

jQuery

// This adds a div tag around the table header text 
//  - IE white-space bug in standard mode
$('table.className tr th').wrapInner(
  "<div class='ie_correct_header_whitespace'></div>"
);

CSS

.ie_correct_header_whitespace {
   white-space: nowrap;
}
도움이 되었습니까?

해결책

우선, 표준 모드에서 작동하도록하는 것이 좋습니다. 'Just Work'라는 레이아웃을 만들기 위해 Quirks 모드에 의존하는 것은 매우 건강한 접근법이 아닙니다.

컨텐츠를 블록 요소로 래핑하고 DIV 요소라고 말한 다음 DIV를 테이블 헤더에 넣을 수 있습니다. 오버플로와 너비는 표준 모드에서 그러한 방식으로 존중되어 원하는 효과를줍니다.

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