入門12
4331 ワード
CSS hackとは
ブラウザの互換性についてお話しします
ブラウザ対応の書き方を5つ以上挙げます
IE条件コメント法
IE
IE6
IE6
IE8
IE
CSS属性接頭辞法
.hack{
/*demo1 */
/*demo1 ， IE6/7 ， */
background-color: red; /* All browsers */
background-color: blue !important;/* All browsers but IE6 */
*background-color: black; /* IE6, IE7 */
+background-color: yellow;/* IE6, IE7*/
background-color: gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color: purple\0; /* IE8, IE9, IE10 */
background-color: orange\9\0;/*IE9, IE10*/
_background-color: green; /* Only works in IE6 */
*+background-color: pink; /* WARNING: Only works in IE7 ? Is it right? */
}
.hacktest{
background-color: blue; /* ， firefox */
background-color: red\9; /*all ie*/
background-color: yellow\0; /*for IE8/IE9/10 opera */
+background-color: pink; /*for ie6/7*/
_background-color: orange; /*for ie6*/
}
ブラウザのプライベート接頭辞の追加
-webkit-border-radius: 50%; // chrome
-o-border-radius: 50%; // opera
-moz-border-radius: 50%; // FixFore
-ms-border-radius: 50%; // IE edge
セレクタ接頭辞法
*html * IE6
*+html *+ IE7
@media screen\9{...} IE6/7
@media \0screen {body { background: red; }} IE8
@media \0screen\,screen\9{body { background: blue; }} IE6/7/8
@media screen\0 {body { background: green; }} IE8/9/10
@media screen and (min-width:0\0) {body { background: gray; }} IE9/10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} IE10