ngocquynh
Admin
Posts : 285
Points : 1005
10
Join date : 18/12/2010
Age : 35
 |  Tiêu đề: Hacking CSS Mon May 09, 2011 2:13 pm | |
| Một trong những vấn đề thường gặp trong lập trình stylesheet / css / html là sự không đồng nhất giữa các trình duyệt.
Có rất nhiều trình duyệt (IE, Chrome, Firefox, Opera, Safari) nên cách tốt nhất là các bạn nên tập chuẩn hóa theo dạng xhtml + hạn chế các cách thức như float, clear, position absolute khi dùng CSS thì sẽ tránh được sự không tương thích này.
Tuy nhiên trong trường hợp bất khả kháng và các bạn cần phải style cho các đối tượng các thuộc tính khác nhau cho từng trình duyệt thì các bạn nên tham khảo bảng sau:
Comprehensive List of Browser-Specific CSS Hacks - Code:
-
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */ |
|
