검색 브라우저 지원 디스플레이 : 인라인 블록

Question

브라우저가 CSS 속성 디스플레이 인 인라인 블록을 지원하는지 어떻게 감지 할 수 있습니까?

Answer 1

Javascript의 객체 나 기능과 관련이없는 순수한 CSS 속성이므로 Javascript로이를 감지 할 수있는 방법이 없습니다. 가장 좋은 점은 here을 사용하여 호환성 목록을 확인하고 CSS를 사용하여 해결 방법을 만드는 것입니다.

Answer 2

QuirksMode charts에 따르면, inline-block를 지원하지 않는 유일한 주류 브라우저는 IE6, 7 (글쎄, 그들은하지만 inline의 기본 display 유형이 요소에 대해, 그것을 지원합니다.) 난 그냥 생각 것이 지원됩니다 conditional comments을 통해 IE6/7에 대한 대안을 적용하십시오.

(참고 :. 내가 inline-block에 대한 지원의 파이어 폭스 2의 부족을 무시하고 FF3로 업그레이드 한 사용자의 대부분을 가정하지만, 간단한 인터넷 검색은 그를 백업 할 수있는 숫자를 발굴하지 않은거야 YMMV.)

그러나 자바 스크립트에서 지원을 결정하는 것이 유일한 옵션 인 경우 사용자 에이전트 스니핑으로 돌아 가야합니다. YUI library의 YAHOO.env.ua 클래스는 복사하여 사용할 수있는 편리한 코드입니다. (BSD 라이선스가 있고, YUI 라이브러리의 다른 부분에 의존하지 않으며, 코멘트가없는 약 25-30 행에 불과합니다.)

Answer 3

글쎄, 다음은 순전히 bavhiour를 검사하여 할 수있는 일입니다. 사용자 에이전트 스니핑 대신 자바 스크립트가있는 브라우저 :

테스트 시나리오 및 제어 시나리오를 설정합니다. 말하자면, 다음과 같은 구조 :

• 사업부
  • 사업부/내용 "테스트"w
  • 사업부/내용 "TEST2"

삽입 한 사본에 w 두 개의 내부 div가 인라인 블록으로 설정된 문서를 만들고 두 개의 내부 div가 차단되도록 설정하여 문서에 다른 사본을 삽입하십시오. 브라우저가 인라인 블록을 지원하면 포함 div의 높이가 달라집니다.

대체 대답은 :

당신은 또한 브라우저가 지정된 요소의 CSS를 치료하는 방법을 볼 수 getComputedStyle를 사용할 수 있습니다. 따라서 이론적으로 "display : inline-block"요소를 추가 한 다음 computedStyle을 확인하여 그것이 살아남은 지 확인하십시오. 유일한 문제 : IE는 getComputedStyle을 지원하지 않습니다. 대신 currentStyle을 사용합니다. 나는 currentStyle이 똑같이 기능하는지 알지 못한다. (아마도 그것은 우리가 원하는 행동과 유사하게 기능한다 : "잘못된"값 무시).

Answer 4

덧붙여서 : CSS만으로 IE6 +, FF2 +, Opera 및 WebKit에서 크로스 브라우저 인라인 블록을 구현하려면 a neat way이 있습니다. CSS는 유효하지만 CSS는 아직 없습니다.

Answer 5

Christopher Swasey은 정확합니다.

나는 기술의 jsFiddle 데모를 http://ajh.us/test-inline-block에 설정했습니다.

코드

은 본질적으로 :

var div = document.createElement('div'); 
div.style.cssText = 'display:inline-block'; 

// need to do this or else document.defaultView doesn't know about it 
$('body').append(div); 
// that was jQuery. It’s possible to do without, naturally 

var results = false; 

if (div.currentStyle) { 
    results = (div.currentStyle['display'] === 'inline-block'); 
} else if (window.getComputedStyle) { 
    results = document.defaultView.getComputedStyle(div,null).getPropertyValue('display')=== 'inline-block'; 
} 

//clean up 
$(div).remove(); 

alert('display: inline-block support: '+results); 

이 동일한 기술은 또한 display: run-in 지원을 검출 작동 유의하시기 바랍니다.