Chẳng có gì phiền toái bằng cái sự “tương thích”. Mỗi phiên bản IE, Microsoft thường kén cá chọn canh chỉ hỗ trợ “một số” điều khiển CSS mà họ thích. Và đây là danh sách chi tiết cái sự “thích” của anh em nhà cụ Bill:
Sẵn sàng hỗ trợ
Cụ Bill lập lờ lưỡng lự
Cụ Bill ứ chơi
Các trình duyệt khác cũng tương tự, tuy dễ chịu hơn, hỗ trợ CSS nhiều hơn, nhưng không phải điều khiển CSS nào họ cũng… thích.
FF = Firefox, C = Chrome, S = Safari, O = Opera
Rules
IE6 | IE7 | IE8 | IE9 | FF | Chrome | Safari | Opera | |
---|---|---|---|---|---|---|---|---|
@charset | ![]() | ![]() | ![]() | ![]() | ||||
@import | ![]() | ![]() | ![]() | ![]() | ||||
@media | ![]() | ![]() | ![]() | ![]() | ||||
@page | ![]() | ![]() | ![]() | ![]() | ||||
@font-face | ![]() | ![]() | ![]() | ![]() | ||||
@namespace | ![]() | ![]() | ![]() | ![]() |
Element Selectors
IE6 | IE7 | IE8 | IE9 | ||
---|---|---|---|---|---|
.value { } | Class | ![]() | ![]() | ![]() | ![]() |
#value { } | ID | ![]() | ![]() | ![]() | ![]() |
E { } | Type | ![]() | ![]() | ![]() | ![]() |
* { } | Universal | ![]() | ![]() | ![]() | ![]() |
ns|E { } | Namespaced | ![]() | ![]() | ![]() | ![]() |
Attribute Selectors
IE6 | IE7 | IE8 | IE9 | ||
---|---|---|---|---|---|
[att=val] { } | Equality [=] | ![]() | ![]() | ![]() | ![]() |
att] { } | Existence [] | ![]() | ![]() | ![]() | ![]() |
[att|=val] { } | Hyphen [|=] | ![]() | ![]() | ![]() | ![]() |
[att~=val] { } | Whitespace [~=] | ![]() | ![]() | ![]() | ![]() |
[ns|attr] { } | Namespaced | ![]() | ![]() | ![]() | ![]() |
[att^=val] { } | Prefix [^=] | ![]() | ![]() | ![]() | ![]() |
[att*=val] { } | Substring [*=] | ![]() | ![]() | ![]() | ![]() |
[att$=val] { } | Suffix [$=] | ![]() | ![]() | ![]() | ![]() |
Combinators
IE6 | IE7 | IE8 | IE9 | ||
---|---|---|---|---|---|
E + F { } | Adjacent Sibling (+) | ![]() | ![]() | ![]() | ![]() |
E > F { } | Child (>) | ![]() | ![]() | ![]() | ![]() |
E F { } | Descendant | ![]() | ![]() | ![]() | ![]() |
E ~ F { } | General Sibling (~) | ![]() | ![]() | ![]() | ![]() |
Pseudo-classes
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
:active { } | ![]() | ![]() | ![]() | ![]() |
:first-child { } | ![]() | ![]() | ![]() | ![]() |
:focus { } | ![]() | ![]() | ![]() | ![]() |
:hover { } | ![]() | ![]() | ![]() | ![]() |
:lang(C) { } | ![]() | ![]() | ![]() | ![]() |
:link { } | ![]() | ![]() | ![]() | ![]() |
:visited { } | ![]() | ![]() | ![]() | ![]() |
@page :first { } | ![]() | ![]() | ![]() | ![]() |
@page :left { } | ![]() | ![]() | ![]() | ![]() |
@page :right { } | ![]() | ![]() | ![]() | ![]() |
:root { } | ![]() | ![]() | ![]() | ![]() |
:nth-child(n) { } | ![]() | ![]() | ![]() | ![]() |
:nth-last-child(n) { } | ![]() | ![]() | ![]() | ![]() |
:nth-of-type(n) { } | ![]() | ![]() | ![]() | ![]() |
:nth-last-of-type(n) { } | ![]() | ![]() | ![]() | ![]() |
:last-child { } | ![]() | ![]() | ![]() | ![]() |
:first-of-type { } | ![]() | ![]() | ![]() | ![]() |
:last-of-type { } | ![]() | ![]() | ![]() | ![]() |
:only-child { } | ![]() | ![]() | ![]() | ![]() |
:only-of-type { } | ![]() | ![]() | ![]() | ![]() |
:empty { } | ![]() | ![]() | ![]() | ![]() |
:target { } | ![]() | ![]() | ![]() | ![]() |
:not(s) { } | ![]() | ![]() | ![]() | ![]() |
:enabled { } | ![]() | ![]() | ![]() | ![]() |
:disabled { } | ![]() | ![]() | ![]() | ![]() |
:checked { } | ![]() | ![]() | ![]() | ![]() |
:indeterminate { } | ![]() | ![]() | ![]() | ![]() |
:default { } | ![]() | ![]() | ![]() | ![]() |
:valid { } | ![]() | ![]() | ![]() | ![]() |
:invalid { } | ![]() | ![]() | ![]() | ![]() |
:in-range { } | ![]() | ![]() | ![]() | ![]() |
:out-of-range { } | ![]() | ![]() | ![]() | ![]() |
:required { } | ![]() | ![]() | ![]() | ![]() |
:optional { } | ![]() | ![]() | ![]() | ![]() |
:read-only { } | ![]() | ![]() | ![]() | ![]() |
:read-write { } | ![]() | ![]() | ![]() | ![]() |
Pseudo-elements
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
:after { } | ![]() | ![]() | ![]() | ![]() |
:before { } | ![]() | ![]() | ![]() | ![]() |
:first-letter { } | ![]() | ![]() | ![]() | ![]() |
:first-line { } | ![]() | ![]() | ![]() | ![]() |
::before { } | ![]() | ![]() | ![]() | ![]() |
::after { } | ![]() | ![]() | ![]() | ![]() |
::first-letter { } | ![]() | ![]() | ![]() | ![]() |
::first-line { } | ![]() | ![]() | ![]() | ![]() |
::selection { } | ![]() | ![]() | ![]() | ![]() |
::value { } | ![]() | ![]() | ![]() | ![]() |
::choices { } | ![]() | ![]() | ![]() | ![]() |
::repeat-item { } | ![]() | ![]() | ![]() | ![]() |
::repeat-index { } | ![]() | ![]() | ![]() | ![]() |
Properties
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ !important } | ![]() | ![]() | ![]() | ![]() |
2D Transforms
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ transform : sFunction } | No | No | No | Yes |
{ transform-origin : sOrigin } | No | No | No | Yes |
Lists
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ list-style : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ list-style-image : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ list-style-position : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ list-style-type : sStyle } | ![]() | ![]() | ![]() | ![]() |
Màu chữ và màu nền
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ color : sColor } | ![]() | ![]() | ![]() | ![]() |
{ background : sBackground } | ![]() | ![]() | ![]() | ![]() |
{ background-attachment : sAttachment } | ![]() | ![]() | ![]() | ![]() |
{ background-color : sColor } | ![]() | ![]() | ![]() | ![]() |
{ background-image : sLocation } | ![]() | ![]() | ![]() | ![]() |
{ background-position : sPosition } | ![]() | ![]() | ![]() | ![]() |
{ background-repeat : sRepeat } | ![]() | ![]() | ![]() | ![]() |
{ color-profile : sProfile } | ![]() | ![]() | ![]() | ![]() |
{ rendering-intent : sIntent } | ![]() | ![]() | ![]() | ![]() |
{ background : sBackground1, sBackground2, … } | ![]() | ![]() | ![]() | ![]() |
{ background-clip : sClip } | ![]() | ![]() | ![]() | ![]() |
{ background-origin : sOrigin } | ![]() | ![]() | ![]() | ![]() |
{ background-break : sBreak } | ![]() | ![]() | ![]() | ![]() |
{ background-size : sSize } | ![]() | ![]() | ![]() | ![]() |
Phông chữ
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ direction : sDirection } | ![]() | ![]() | ![]() | ![]() |
{ font : sFont } | ![]() | ![]() | ![]() | ![]() |
{ font-family : sFamily } | ![]() | ![]() | ![]() | ![]() |
{ font-size : sSize } | ![]() | ![]() | ![]() | ![]() |
{ font-style : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ font-variant : sVariant } | ![]() | ![]() | ![]() | ![]() |
{ font-weight : sWeight } | ![]() | ![]() | ![]() | ![]() |
{ letter-spacing : sSpacing } | ![]() | ![]() | ![]() | ![]() |
{ line-height : sHeight } | ![]() | ![]() | ![]() | ![]() |
{ text-align : sAlign } | ![]() | ![]() | ![]() | ![]() |
{ text-decoration : sDecoration } | ![]() | ![]() | ![]() | ![]() |
{ text-indent : sIndent } | ![]() | ![]() | ![]() | ![]() |
{ text-transform : sTransform } | ![]() | ![]() | ![]() | ![]() |
{ unicode-bidi : sAlign } | ![]() | ![]() | ![]() | ![]() |
{ vertical-align : sAlign } | ![]() | ![]() | ![]() | ![]() |
{ white-space : sWrap } | ![]() | ![]() | ![]() | ![]() |
{ word-spacing : sSpacing } | ![]() | ![]() | ![]() | ![]() |
{ font-effect : sEffect } | ![]() | ![]() | ![]() | ![]() |
{ font-emphasize : sEmphasize } | ![]() | ![]() | ![]() | ![]() |
{ font-size-adjust : sSizeAdjust } | ![]() | ![]() | ![]() | ![]() |
{ font-smooth : sSmooth } | ![]() | ![]() | ![]() | ![]() |
{ font-stretch : sStretch } | ![]() | ![]() | ![]() | ![]() |
{ hanging-punctuation : sHangingPunctuation } | ![]() | ![]() | ![]() | ![]() |
{ punctuation-trim : sTrim } | ![]() | ![]() | ![]() | ![]() |
{ ruby-align : sRubyAlign } | ![]() | ![]() | ![]() | ![]() |
{ ruby-overhang : sRubyOverhang } | ![]() | ![]() | ![]() | ![]() |
{ ruby-position : sRubyPlacement } | ![]() | ![]() | ![]() | ![]() |
{ ruby-span : sRubySpan } | ![]() | ![]() | ![]() | ![]() |
{ text-align-last : sAlignLast } | ![]() | ![]() | ![]() | ![]() |
{ text-emphasis : sEmphasis } | ![]() | ![]() | ![]() | ![]() |
{ text-justify : sJustify } | ![]() | ![]() | ![]() | ![]() |
{ text-outline : sOutline } | ![]() | ![]() | ![]() | ![]() |
{ text-overflow : sOverflow} | ![]() | ![]() | ![]() | ![]() |
{ text-shadow : sShadow } | ![]() | ![]() | ![]() | ![]() |
{ text-wrap : sWrap } | ![]() | ![]() | ![]() | ![]() |
{ word-break : sBreak } | ![]() | ![]() | ![]() | ![]() |
{ word-wrap : sWrap } | ![]() | ![]() | ![]() | ![]() |
{ writing-mode : sFlow } | ![]() | ![]() | ![]() | ![]() |
Generated Content
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ content : sContent } | ![]() | ![]() | ![]() | ![]() |
{ counter-increment : sCounter } | ![]() | ![]() | ![]() | ![]() |
{ counter-reset : sCounter } | ![]() | ![]() | ![]() | ![]() |
{ quotes : sQuotes } | ![]() | ![]() | ![]() | ![]() |
Khung viền
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ border : sBorder } | ![]() | ![]() | ![]() | ![]() |
{ border-bottom : sBottom } | ![]() | ![]() | ![]() | ![]() |
{ border-bottom-color : sColor } | ![]() | ![]() | ![]() | ![]() |
{ border-bottom-style : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ border-bottom-width : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ border-collapse : sCollapse } | ![]() | ![]() | ![]() | ![]() |
{ border-color : sColor } | ![]() | ![]() | ![]() | ![]() |
{ border-left : sLeft } | ![]() | ![]() | ![]() | ![]() |
{ border-left-color : sColor } | ![]() | ![]() | ![]() | ![]() |
{ border-left-style : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ border-left-width : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ border-right : sRight} | ![]() | ![]() | ![]() | ![]() |
{ border-right-color : sColor } | ![]() | ![]() | ![]() | ![]() |
{ border-right-style : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ border-right-width : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ border-spacing : sSpacing } | ![]() | ![]() | ![]() | ![]() |
{ border-style : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ border-top : sTop } | ![]() | ![]() | ![]() | ![]() |
{ border-top-color : sColor } | ![]() | ![]() | ![]() | ![]() |
{ border-top-style : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ border-top-width : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ border-width : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ caption-side : sLocation } | ![]() | ![]() | ![]() | ![]() |
{ clear : sClear } | ![]() | ![]() | ![]() | ![]() |
{ empty-cells : sEmptyCells } | ![]() | ![]() | ![]() | ![]() |
{ float : sFloat } | ![]() | ![]() | ![]() | ![]() |
{ margin : sMargin } | ![]() | ![]() | ![]() | ![]() |
{ margin-bottom : sHeight } | ![]() | ![]() | ![]() | ![]() |
{ margin-left : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ margin-right : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ margin-top : sHeight } | ![]() | ![]() | ![]() | ![]() |
{ padding : sPadding } | ![]() | ![]() | ![]() | ![]() |
{ padding-bottom : sPadding } | ![]() | ![]() | ![]() | ![]() |
{ padding-left : sPadding } | ![]() | ![]() | ![]() | ![]() |
{ padding-right : sPadding } | ![]() | ![]() | ![]() | ![]() |
{ padding-top : sPadding } | ![]() | ![]() | ![]() | ![]() |
{ table-layout : sLayout } | ![]() | ![]() | ![]() | ![]() |
{ border-break : sBreak } | ![]() | ![]() | ![]() | ![]() |
{ border-image : sImage } | ![]() | ![]() | ![]() | ![]() |
{ border-radius : sRadius } | ![]() | ![]() | ![]() | ![]() |
{ box-shadow : sShadow } | ![]() | ![]() | ![]() | ![]() |
Vị trí
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ bottom : sBottom } | ![]() | ![]() | ![]() | ![]() |
{ clip : sClip } | ![]() | ![]() | ![]() | ![]() |
{ display : sDisplay } | ![]() | ![]() | ![]() | ![]() |
{ height : sHeight } | ![]() | ![]() | ![]() | ![]() |
{ left : sPosition } | ![]() | ![]() | ![]() | ![]() |
{ max-height : sMaxHeight } | ![]() | ![]() | ![]() | ![]() |
{ max-width : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ min-height : sMinHeight } | ![]() | ![]() | ![]() | ![]() |
{ min-width : sMinWidth } | ![]() | ![]() | ![]() | ![]() |
{ overflow : sOverflow } | ![]() | ![]() | ![]() | ![]() |
{ position : sPosition } | ![]() | ![]() | ![]() | ![]() |
{ right : sPosition } | ![]() | ![]() | ![]() | ![]() |
{ top : sTop } | ![]() | ![]() | ![]() | ![]() |
{ visibility : sVisibility } | ![]() | ![]() | ![]() | ![]() |
{ width : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ z-index : vOrder } | ![]() | ![]() | ![]() | ![]() |
{ overflow-x : sOverflow } | ![]() | ![]() | ![]() | ![]() |
{ overflow-y : sOverflow } | ![]() | ![]() | ![]() | ![]() |
In ấn
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ orphans : nLines } | ![]() | ![]() | ![]() | ![]() |
{ page-break-after : sBreak } | ![]() | ![]() | ![]() | ![]() |
{ page-break-before : sBreak } | ![]() | ![]() | ![]() | ![]() |
{ page-break-inside : sBreak } | ![]() | ![]() | ![]() | ![]() |
{ widows : nLines } | ![]() | ![]() | ![]() | ![]() |
{ fit : sFit } | ![]() | ![]() | ![]() | ![]() |
{ fit-position : sPosition } | ![]() | ![]() | ![]() | ![]() |
{ image-orientation : sOrientation } | ![]() | ![]() | ![]() | ![]() |
{ page : sPage } | ![]() | ![]() | ![]() | ![]() |
{ size : sSize } | ![]() | ![]() | ![]() | ![]() |
User Interface
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ cursor : sCursor } | ![]() | ![]() | ![]() | ![]() |
{ outline : sOutline } | ![]() | ![]() | ![]() | ![]() |
{ outline-color : sColor } | ![]() | ![]() | ![]() | ![]() |
{ outline-style : sStyle } | ![]() | ![]() | ![]() | ![]() |
{ outline-width : sWidth } | ![]() | ![]() | ![]() | ![]() |
{ appearance : sAppearance } | ![]() | ![]() | ![]() | ![]() |
{ box-sizing : sSizing } | ![]() | ![]() | ![]() | ![]() |
{ icon : sIcon } | ![]() | ![]() | ![]() | ![]() |
{ nav-down : sNavDown } | ![]() | ![]() | ![]() | ![]() |
{ nav-index : sIndex } | ![]() | ![]() | ![]() | ![]() |
{ nav-left : sNavLeft } | ![]() | ![]() | ![]() | ![]() |
{ nav-right : sNavRight } | ![]() | ![]() | ![]() | ![]() |
{ nav-up : sNavUp } | ![]() | ![]() | ![]() | ![]() |
{ outline-offset : sOffset } | ![]() | ![]() | ![]() | ![]() |
{ outline-radius : sRadius } | ![]() | ![]() | ![]() | ![]() |
{ resize : sResize } | ![]() | ![]() | ![]() | ![]() |
Multi-column và Speech
Anh em nhà cụ Bill ứ thích “đám” Multi-column, Speech của CSS3, nên ứ chơi với cả đám.
Media Queries
Internet Explorer 9 hỗ trợ Media Queries với các thuộc tính: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution.
Values
Tin tức nổi bật
Thiết kế web theo mẫu
Thiết kế web theo mẫu là gì? Thiết kế web theo mẫu là dịch vụ website được xây dựng...
Tổng hợp 20+ cách kiếm tiền từ website trong năm 2020
Thời kỳ 4.0, Internet trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Người...
10 bước xây dựng kế hoạch marketing online
Thị trường luôn thay đổi và chính vì thế các chiến lược marketing online của bạn cũng cần...
Ý tưởng đặt tên thương hiệu – Cách chọn tên miền website – Lời khuyên vàng từ ITC Việt
Cách chọn tên miền website. Chúng tôi là ITC Việt. Chúng tôi là công ty thiết kế website...
Thiết kế website theo yêu cầu
Hiện nay Dịch vụ Thiết kế website theo yêu cầu đã không còn xa lạ đối với các doanh...
Thiết kế trang web, lập trang web, dựng trang web bán hàng
Nội dung bài viết Thiết kế trang web Thiết kế trang web là điều mà các công...
E-commerce là gì? E-business là gì? So sánh E-commerce và E-business
E-Commerce (tiếng Việt là thương mại điện tử) đang là một trong những vấn đề đáng quan tâm của...
Để thiết kế web đẹp bạn không thể bỏ qua 8 lưu ý sau
Việc thiết kế web ngày nay không còn dừng lại ở việc cung cấp thông tin đủ hay...