Chrome에만 CSS 규칙을 적용하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-12-11 01:45:10

원래의

535명이 탐색했습니다.

How Can I Apply CSS Rules Exclusively to Google Chrome?

Chrome에만 특정 CSS 규칙 적용

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

CSS 솔루션:

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

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

로그인 후 복사

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

로그인 후 복사

@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!