CSS에서 해킹이란 무엇을 의미합니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 해킹이란 무엇을 의미합니까?

清浅

Dec 07, 2018 pm 04:36 PM

hack

CSS의 해킹은 우리가 원하는 페이지 효과를 제공할 수 있도록 다양한 브라우저와 버전에 대해 서로 다른 CSS 스타일을 작성하는 것입니다.

CSS 해킹은 주로 브라우저 호환성 문제를 해결하는 데 사용되며 다양한 브라우저는 서로 다른 CSS를 작성합니다. 그리고 다른 브라우저에서도 원하는 페이지 효과를 얻을 수 있습니다. 오늘은 기사

에서 어떤 해킹이 있는지 자세히 소개하겠습니다. 해킹의 정의: 해킹은 Internet Explorer, Firefox, Chrome 등 제조업체가 다른 브라우저 또는 동일한 제조업체의 브라우저 버전이 다르기 때문에 발생합니다. 생성된 페이지 효과도 다릅니다. 이때 서로 다른 브라우저와 호환되고 서로 다른 브라우저에서 얻을 수 있도록 서로 다른 브라우저에 대해 서로 다른 CSS를 작성해야 합니다. 즉, 해킹의 목적은 CSS 코드가 다른 브라우저와 호환되도록 만드는 것입니다
예: CSS3 속성을 작성할 때 아래와 같이 브라우저마다 다른 코드를 작성해야 하는 경우가 종종 있습니다

animation:5s;/*标准版*/
-moz-animation: 5s;/* Firefox */
-webkit-animation:5s;/* Safari 和 Chrome */
-o-animation:5s;/* Opera */

로그인 후 복사

! 중요한 문제:

Internet Explorer 6 이하에서는 !important 식별자에 문제가 있습니다. 동일한 속성을 가진 다른 스타일이 동일한 스타일 선언 블록에 나타나면 해당 식별자가 무시됩니다. 이는 Internet Explorer 6 및 기타 브라우저가 무시하는 특수 속성 값을 제공하는 데 사용될 수 있습니다. 하지만 이 문제는 Internet Explorer 7 이상에서는 발생하지 않습니다

  p
 {
     background: green !important;
     background: red; 
         }
      </style>
   </head>
   <body class="page-body">
      <p>Test</p>

로그인 후 복사

IE 브라우저의 F12 디버깅 도구를 통해 IE 버전을 전환하여 실행 효과를 확인할 수 있습니다

IE5:

IE8:

*HTML 문제

hack 부분의 코드는 별표 "*" 다음에 "html"로 표시됩니다. 이는 범용 선택자와 요소 유형 선택자의 조합입니다. 어느 시점에서 다른 선택기 전에 이 두 선택기가 함께 사용되면 일부 하위 버전의 브라우저에서만 효과가 있고 다른 브라우저에서는 효과가 없습니다. 아무런 효과가 없더라도 실제로는 효과적이므로 오류를 보고하지 않습니다.

CSS에서 해킹이란 무엇을 의미합니까?

*html p
         {
            background: green;
            background: red; 
         }
      </style>
   </head>
   <body class="page-body">
      <p>Test</p>

로그인 후 복사

IE5:

CSS에서 해킹이란 무엇을 의미합니까?