Chrome에만 CSS 규칙을 적용하려면 어떻게 해야 합니까?

Chrome에만 특정 CSS 규칙 적용

Google Chrome의 고유한 렌더링 엔진을 지원하려면 CSS 규칙을 적용해야 하는 경우가 많습니다. 독점적으로. 한 가지 예는 div 요소의 위치를 ​​조정하는 것입니다.

CSS 솔루션:

공급업체 접두사를 활용하면 다음과 같이 Chrome 관련 스타일을 타겟팅할 수 있습니다.

• Chrome, Safari, Edge 및 Firefox:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div {
    top: 10px;
  }
}

• Chrome 29의 경우 (소수 DPI 값 지원)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  div {
    top: 0px;
  }
}

• 크롬의 경우 22-28:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector {
    -chrome-only(top: 0px);
  }
}

JavaScript 솔루션:

CSS 대신 JavaScript를 사용하여 Chrome 브라우저를 감지하고 그에 따라 div의 스타일을 수정합니다.

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // Modify the div's top position here
}

위 내용은 Chrome에만 CSS 규칙을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!