다른 브라우저와의 충돌을 피하면서 CSS 스타일을 Safari에만 적용하려면 어떻게 해야 합니까?

Safari 전용 콘텐츠 스타일 지정이 가능한가요?

문제:

당신' 현재 두 브라우저 모두로 인해 이전 방법도 Chrome에 영향을 미치기 때문에 Safari에만 영향을 미치는 CSS를 찾는 데 어려움을 겪고 있습니다. WebKit을 활용합니다. Safari와 Chrome의 정렬 방식이 다르기 때문에 스타일 지정이 특히 어렵습니다.

해결책:

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF;    /* Example text color */
  background-color:#CCCCCC;   /* Example background color */

}

또는 Safari 10.1 이상의 경우 다음을 사용하세요.

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        /* CSS styles */

    }
}}

또는

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        /* CSS styles */

    }
}}

Safari의 경우 6.1 ~ 10.0, 활용:

/* Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        /* CSS styles */

    }
}}

특정 Safari 버전에 대한 추가 해킹은 제공된에서 찾을 수 있습니다.

사용법:

<div>

참고:

항상 제공된 라이브 테스트에서 이러한 해킹을 테스트하는 것을 잊지 마세요. 웹사이트에 구현하기 전에 페이지를 방문하세요. 잠재적인 CSS 충돌을 제거하여 테스트 페이지가 의도한 대로 작동하는지 확인하세요.

위 내용은 다른 브라우저와의 충돌을 피하면서 CSS 스타일을 Safari에만 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!