디스플레이에 대한 브라우저 지원 감지 : 인라인 블록

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

문제

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

도움이 되었습니까?

해결책

JavaScript의 객체 나 함수와 관련이없는 순수한 CSS 속성이므로 JavaScript를 사용하여이를 감지 할 방법이 없습니다. 내가 말할 수있는 가장 좋은 점은 확인하는 것입니다. 여기 꽤 좋은 호환성 목록의 경우 CSS를 사용하여 해결 방법을 작성하십시오.

다른 팁

글쎄, 여기에 사용자 에이전트 스니핑 대신 javaScript가있는 브라우저의 bavhiour를 검사하여 순전히 할 수있는 일이 있습니다.

테스트 시나리오와 제어 시나리오를 설정하십시오. 예를 들어 다음 구조를 사용하여 :

  • div
    • 컨텐츠 "테스트"
    • 컨텐츠 "test2"

두 개의 내부 div가 인라인 블록으로 설정된 상태에서 문서에 하나의 사본을 삽입하고 두 개의 내부 div가 블록으로 설정된 상태에서 문서에 다른 사본을 삽입하십시오. 브라우저가 인라인 블록을 지원하면 포함 된 DIV의 높이가 다릅니다.

대체 답변 :

GetComputedStyle을 사용하여 브라우저가 주어진 요소의 CS를 어떻게 처리하는지 확인할 수 있습니다. 따라서 이론적으로 "Display : Inline-Block"이있는 요소를 추가 한 다음 ComputedStyle을 확인하여 살아남은 지 확인할 수 있습니다. 유일한 문제 : IE는 GetComputedStyle을 지원하지 않습니다. 대신, 그것은 현재 스타일을 가지고 있습니다. CurrentStyle이 동일하게 기능하는지 모르겠습니다 (아마도 우리가 원하는 행동과 유사하게 기능하는 것 : "유효하지 않은"값을 무시합니다).

에 따르면 퀴크 스 모드 차트, 지원하지 않는 유일한 주류 브라우저 inline-block IE6과 7입니다. display 유형 inline.) 방금 지원되었다고 가정하고 IE6/7에 대한 해결 방법을 조건부 의견.

(참고 : 나는 Firefox 2의 지원 부족을 무시하고 있습니다. inline-block 그리고 대다수의 사용자가 FF3로 업그레이드했다고 가정하지만 간단한 인터넷 검색으로 인해 그 숫자를 뒷받침 할 수는 없었습니다. ymmv.)

그러나 JavaScript에서 지원을 결정하는 것이 유일한 옵션이라면 사용자 에이전트 스니핑으로 돌아 가야합니다. 그만큼 yahoo.env.ua 수업 유비 도서관 복사 및 사용할 수있는 편리한 코드 덩어리입니다. (BSD 라이센스가 있고, Yui 라이브러리의 다른 부분에 의존하지 않으며, 의견이없는 약 25-30 줄에 불과합니다)

그건 그렇고 : 있습니다 깔끔한 방법 CSS 단독으로 IE6+, FF2+, 오페라 및 WebKit에서 크로스 브라우저 인라인 블록을 구현합니다. (유효한 CSS는 아니지만 여전히 CSS.)

크리스토퍼 스웨이 매우 정확합니다.

나는 그의 기술의 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 지원하다.

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