CSS互換性についての説明

前の言葉

フロントエンドエンジニアにとって、直面したくないが直面しなければならない問題は互換性です。数年前、互換性に対処するには、IE ブラウザの下位バージョンの互換性に対処することが一般的でした。近年、モバイル端末の発展に伴い、技術者は携帯電話への対応にも注意を払う必要があります。この記事では CSS の互換性について詳しく紹介します

奇妙なモードの問題: DTD 宣言が省略された場合でも、Firefox は標準モードに従って Web ページを解析しますが、IE では奇妙なモードがトリガーされます。奇妙なパターンによって不必要なトラブルが引き起こされるのを避けるために、DTD 宣言を記述する良い習慣を身に付けることが最善です。

2. IE6 の二重マージンの問題: IE6 では、要素がフローティングで、同時に margin-left または margin-right が設定されている場合、マージンの値が 2 倍になります。例:

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】

【注意】padding-box属性値

(IE7-不支持)
box-sizing

はFirefoxのみサポートしています

レイアウトクラス属性

【表示】

【注意】IE7-ブラウザはテーブルクラス属性値をサポートしていません

(全兼容)
display

【浮動】

(全兼容)floatclear

【位置決め】

【注意】IE6-固定をサポートしていません配置: 固定

(全兼容)
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>

【フレックス】

(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

【1行目のインデントtext-indent】

(全兼容)
text-indent

【配置】

【注意】IE7-ブラウザの垂直方向の整列のパーセント値は小数点行の高さをサポートしていません

--align

(safari浏览器、IOS、androis4.4-浏览器不支持)
text-align-last

【間隔】

(全兼容)
word-spacing
letter-spacing

【大文字小文字変換】

(全兼容)
text-transform

【下線文字装飾】

(全兼容)
text-decoration

【空白】

【注意】IE7ブラウザでは使用できません。 pre-line と pre-wrap の 2 つの属性値をサポートします

(全兼容)
white-space

[改行]

[注 1] W3C では、word-wrap の代わりに overflow-wrap を使用することを推奨しています

[注] 2 ] モバイル端末は現状、word-breakkeep-all

--wrap

【Text Direction】

-webkit--

【Text-overflow text-overflow】

(全兼容)
text-overflow

【の属性値を基本的にサポートしていません。 Text-shadow】

(IE9-不支持)
text-shadow

Modificationクラス属性

【背景】

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

(IE8-不支持)
background-attachment
background-clip
background-size

【前景と透明度】

(全兼容)
color

(IE8-不支持)
opacity

【カラーモード】

【注意】IE7非対応 color:transparent , ただし、background-color:transparentとborder-color:transparentをサポートしています

-

【カーソル】

【注意】IE7は拡張スタイルをサポートしていません

(全兼容)
cursor

【transition】

(IE9-不支持，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀)
transition-property
transition-duration
transiton-timing-function
transition-delay
transition

【Transform】

(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

【合成モード】

(IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀)
mix-blend-mode
background-blend-mode
isolation

【フィルター】

(IE浏览器及android4.3-浏览器不支持，android4.4+需要添加-webkit-前缀)
filter

【リフレクションボックス-reflect 】

Chrome と Safari ブラウザのみがサポートされています-webkit- プレフィックスを追加する必要があります

【will-change】

(IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+)
will-change

その他の属性

【テーブル】

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

(IE7-不支持)
border-spacing
empty-cells

【ページ】

(全兼容)
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

【疑似要素】

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

(IE7-不支持)
:before
:after

(IE8-不支持)
::selection

【キーワード】

(IE7-浏览器不支持)
inherit

(IE浏览器不支持)
initial

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

(只有safari9.1+和ios9.3+支持)
revert

【計算】

【注意】android4 .4 -4.4.4は加算と減算のみサポートしています。 IE9はbackround-positionをサポートしていません

(IE8-、safari5.1-、ios5.1-、android4.3-不支持)
calc

【単位】

(全兼容)
pxincm
mm
q
pt
pc
em
ex
ch

(IE8-不支持)
rem

(IE8-浏览器不支持，IOS7.1-不支持，android4.3-不支持，对于vmax所有IE浏览器都不支持)
vh
vw
vmin
vmax

以上がCSS互換性についての説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。