> 웹 프론트엔드 > HTML 튜토리얼 > CSS 호환성에 대한 설명

CSS 호환성에 대한 설명

巴扎黑
풀어 주다: 2017-07-18 18:13:29
원래의
1774명이 탐색했습니다.

앞서 말한 말

프론트엔드 엔지니어들이 직면하고 싶지 않지만 직면해야 하는 문제는 바로 호환성입니다. 몇 년 전만 해도 호환성을 다루는 작업에는 일반적으로 낮은 버전의 IE 브라우저 호환성을 다루는 작업이 포함되었습니다. 최근에는 모바일 단말기의 발전으로 엔지니어들도 모바일폰 호환성에 주의를 기울여야 합니다. 이 기사에서는 CSS 호환성을 자세히 소개합니다.

이상한 모드 문제: DTD 선언이 생략되면 Firefox는 여전히 표준 모드에 따라 웹 페이지를 구문 분석하지만 IE에서는 이상한 모드가 실행됩니다. 불필요한 문제를 일으키는 이상한 패턴을 피하려면 DTD 선언을 작성하는 좋은 습관을 기르는 것이 가장 좋습니다.

2. IE6 이중 여백 문제: IE6에서는 요소가 부동 상태이고 margin-left 또는 margin-right가 동시에 설정되면 여백 값이 두 배가 됩니다. 예:

HTML:


박스 모델 속성

[너비/높이]

(全兼容)
width
height

(IE6-不支持)
min-width
max-width
min-height
max-height
로그인 후 복사

[패딩]

padding
로그인 후 복사

【border】

(全兼容)
border
border-width
border-color
border-style

(IE8-不支持)
border-radius

(IE10-不支持)
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

(只有firefox支持,需要添加-moz-前缀)
border-colors
로그인 후 복사

【margin】

(全兼容)
margin

(IE不支持,且需要添加webkit或moz前缀)
margin-start
margin-end

(只有chrome和safari支持,且需要添加webkit前缀)-webkit-margin-before-webkit-margin-after
로그인 후 복사

【outline】

(IE7-不支持)
outline
outline-width
outline-color
outline-style

(IE不支持)
outline-offset
로그인 후 복사

【box-sizing】

  [참고] Firefox에서만 padding-box 속성 값

(IE7-不支持)
box-sizing
로그인 후 복사

을 지원합니다.

레이아웃 클래스 속성

【display】

 [참고] IE7-browser는 테이블 클래스 속성 값을 지원하지 않습니다

(全兼容)
display
로그인 후 복사

【Floating】

(全兼容)floatclear
로그인 후 복사

【Positioning】

[참고]IE6-Fixed를 지원하지 않습니다. 위치 지정: 고정

(全兼容)
position
left
right
top
bottom
z-index
로그인 후 복사

[오버플로 관련]

<span style="color: #000000;">(全兼容)
overflow<br>overflow-x<br>overflow-y<br>clip<br>visibility<br><br>(IE不支持)<br>resize</span>
로그인 후 복사

[flex]

(IE9-不支持)
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
align-self
flex-basis
flex-grow
flex-shrink
flex
order
로그인 후 복사

[다중 열 레이아웃]

(IE10+和chrome浏览器支持标准写法,firefox、safari浏览器及移动端android、IOS需要添加前缀)
column-width
column-count
column-gap
column-rule
column-span(firefox不支持该属性)
columns

(只有firefox支持带前缀的column-fill属性)
column-fill
로그인 후 복사

[그리드]

(IE9-不支持,IE10+需要添加-ms-前缀,android4.4.4-不支持,IOS10.2-不支持)
grid-template-rows
grid-template-columns
grid-template-areas
grid-column-gap
grid-row-gap
grid-gap
grid-row-start
grid-row-end
grid-row
grid-column-start
grid-column-end
grid-column
grid-area
grid-auto-flow
grid-auto-rows
grid-auto-columns
justify-items
justify-self
align-items
align-self
로그인 후 복사

텍스트 클래스 속성

【글꼴】

(全兼容)
font
font-family
font-size
font-style
font-variant
font-weight
line-height
@font-face
로그인 후 복사

【첫줄 들여쓰기 text-indent】

(全兼容)
text-indent
로그인 후 복사

【Alignment】

  [참고] IE7-브라우저에서 세로 정렬의 백분율 값은 소수점 줄 높이를 지원하지 않습니다

--align

(safari浏览器、IOS、androis4.4-浏览器不支持)
text-align-last
로그인 후 복사

[간격]

(全兼容)
word-spacing
letter-spacing
로그인 후 복사

[대문자 및 소문자 텍스트 변환]

(全兼容)
text-transform
로그인 후 복사

[밑줄 텍스트 장식]

(全兼容)
text-decoration
로그인 후 복사

[공백]

[참고] IE7 브라우저는 그렇지 않습니다. pre-line 및 pre-wrap

(全兼容)
white-space
로그인 후 복사

[줄바꿈]

  [참고 1] W3C는 word-wrap

  [참고]을 대체하기 위해 Overflow-wrap 사용을 권장합니다. ] 현재 모바일 단말기는 기본적으로 word-breakkeep-all 

--wrap
로그인 후 복사
[텍스트 방향]

-webkit--
로그인 후 복사
[텍스트-오버플로 텍스트-오버플로]

(全兼容)
text-overflow
로그인 후 복사
[ Text-shadow】

(IE9-不支持)
text-shadow
로그인 후 복사

수정 클래스 속성

【배경】

(全兼容)
background
background-color
background-image
background-repeat
background-position

(IE8-不支持)
background-attachment
background-clip
background-size
로그인 후 복사
【전경 및 투명도】

(全兼容)
color

(IE8-不支持)
opacity
로그인 후 복사
【색상 모드】

 [참고] IE7-지원되지 않는 색상:투명 , 그러나 background-color: transparent 및 border-color: transparent

-
로그인 후 복사
【cursor】

  를 지원합니다.

(全兼容)
cursor
로그인 후 복사
[그라디언트]

(IE9-不支持,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀)
transition-property
transition-duration
transiton-timing-function
transition-delay
transition
로그인 후 복사
[애니메이션]
(IE9-不支持,safari3.-、android2.-.、IOS3.----
로그인 후 복사

[블렌딩 모드]
  IE9-不支持,safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变,且需要添加-webkit-;safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变,且需要添加-webkit-
로그인 후 복사

[필터]

(IE9-不支持;safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀)
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
로그인 후 복사
[반사 상자-반사]

  Chrome 및 Safari 브라우저만 지원 -webkit- 접두사를 추가해야 합니다
【will-change】

(IE浏览器、android4.4-不支持,safari和IOS需要添加-webkit-前缀)
mix-blend-mode
background-blend-mode
isolation
로그인 후 복사

기타 속성

【테이블】

(IE浏览器及android4.3-浏览器不支持,android4.4+需要添加-webkit-前缀)
filter
로그인 후 복사
【페이지】

(IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+)
will-change
로그인 후 복사

【선택기】

(全兼容)
border-collapse
table-layout
caption-side

(IE7-不支持)
border-spacing
empty-cells
로그인 후 복사
re 【【【슈도 클래스】
(全兼容)
page-break-after
page-break-before
page-break-inside

(IE7-不支持)
orphans

(IE及手机端不支持)
windows
로그인 후 복사

【【슈도 요소】
(全兼容)
通配选择器   *元素选择器   div
类选择器     .box
ID选择器     #box
后代选择器   div a
分组选择器   h1,p

(IE6-不支持)
属性选择器    h1[class]
子元素选择器  ul > li
相邻兄弟选择器 div + p

(IE7-不支持)
通用兄弟选择器 div ~ p
로그인 후 복사

【키워드】
(全兼容)
:link
:visited

(IE6-不支持给<a>以外的其他元素设置伪类)
:hover
:active  

(IE7-不支持)
:focus
:lang() 

(IE8-不支持)
:target
:enabled   
:disabled   
:checked :nth-child(n)
:nth-last-child(n)
:first-child
:last-child
:only-child
:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type
:last-of-type
:only-of-type
:root
:not
:empty
:target
로그인 후 복사

【calc】
[참고] android4 .4 -4.4.4 만 추가 및 아 섭취량 만 지원합니다. . IE9는 백라운드 위치를 지원하지 않습니다

(只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持)
:first-letter
:first-line

(IE7-不支持)
:before
:after

(IE8-不支持)
::selection
로그인 후 복사
【unit】

(IE7-浏览器不支持)
inherit

(IE浏览器不支持)
initial

(IE不支持,safari9-不支持,ios9.2-不支持,android4.4.4-不支持)
unset
all

(只有safari9.1+和ios9.3+支持)
revert
로그인 후 복사

위 내용은 CSS 호환성에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿