每個瀏覽器和其版本，都會制定不同的解析規則，所以當我們只想要針對特定瀏覽器做樣式變化時，所用到的技巧就叫做 Hack，一般常見名稱為 CSS Hack，但因為 HTML 其實也有相關設定，所以在標題統稱為瀏覽器 Hack 技巧，在內文中再將之區別。
尤其是第二點會很常應用在「使用者的客群有一定比例使用舊瀏覽器或舊版本」的情況，例如原本畫面使用 CSS 做了一個 3D、會翻轉的效果，但舊瀏覽器或舊版本要達成一樣的目的，只能使用 javascript 達成，那就會造成效能與維護的問題，所以就需要跟設計師溝通是否可以在舊瀏覽器或舊版本使用不同設計。
在 HTML 的 <head> 使用：
<!--[if IE]>如果是 IE 瀏覽器才看得到<![endif]-->
<!--[if IE 6]>如果是 IE 6 才看得到<![endif]-->
<!--[if lt IE 6]>如果是低於 IE 6 (不包含 IE 6) 才看得到<![endif]-->
<!--[if lte IE 6]>如果是 IE 6 以下(包含 IE 6) 才看得到<![endif]-->
<!--[if gt IE 6]>如果是超過 IE 6 （不包含 IE 6）才看得到<![endif]-->
<!--[if gte IE 6]>如果是 IE 6 以上（包含 IE 6）才看得到<![endif]-->
<!--[if !(IE 6)]>除了 IE 6 都看得到<![endif]-->
<!--[if (gte IE 6)&(lt IE 8)]>如果是 IE 6 以上且低於 IE 8 才看得到<![endif]-->
<!--[if (IE 6)|(IE 7)]>如果是 IE 6 或是 IE 7 才看得到<![endif]-->
=============== 以上其他瀏覽器都看不到 ===============
<!--[if !IE]>-->IE 之外的瀏覽器才看得到<!--<![endif]-->
selector {
width/**/: 100px; /* 只有 IE 6 能看到*/
-width: 100px; /* 只有 IE 6 能看到*/
_width: 100px; /* 只有 IE 6 能看到*/
+width: 100px; /* 只有 IE 6, 7 能看到*/
*width: 100px; /* 只有 IE 6, 7 能看到*/
#width: 100px; /* 只有 IE 6, 7 能看到 */
width: 100px\9; /* 只有 IE 6, 7, 8, 9, 10, 11 能看到，且 font-family 有 bug，要用 font-family:Arial \0/ !important; */
width: 100px\0; /* 只有 IE 8, 9, 10, 11 能看到*/
width: 100px\9\0; /* 只有 IE 9, 10, 11 能看到*/
}
/* IE 6, 7 才看得到 */
* html {}
/* IE 7 才看得到*/
*+html {}
selector {
-ms-filter: "alpha(opacity=40)"; /* IE 瀏覽器才會應用 */
}
.ie10 .selector {} /* IE 10 才會應用 */
@media screen and (-ms-high-contrast: none) {
selector {}
} /* IE 10, 11 才會應用 */
// IE 10 才會應用
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
or
if (/*@cc_on!@*/false && document.documentMode === 10) {
document.documentElement.className+=' ie10';
}
selector {
-webkit-property: value;
}
selector {
-moz-property: value;
}
@-moz-document url-prefix() {
.selector {
color: lime;
}
}
由於 IE 可能會從世界上消失（至少一般外網使用者都不太會用到），所以 CSS hack 已經快是一個消失的藝術，因為大部分最新的瀏覽器都能供應最新的 CSS。
（除非有想要特意分別或是用了太新的技術瀏覽器未支援）
