瀏覽器 Hack 技巧

修修補補到懷疑人生

2025補充

網頁歷史 hack 技巧

https://nooshu.com/blog/2025/08/26/hack-to-the-future-frontend/

什麼是 Hack 技巧？

每個瀏覽器和其版本，都會制定不同的解析規則，所以當我們只想要針對特定瀏覽器做樣式變化時，所用到的技巧就叫做 Hack，一般常見名稱為 CSS Hack，但因為 HTML 其實也有相關設定，所以在標題統稱為瀏覽器 Hack 技巧，在內文中再將之區別。

什麼時候需要應用？

上述我們說了「想要針對特定瀏覽器做樣式變化時」，舉例來說：

當使用了新的 CSS 技術，舊瀏覽器或舊版本不支援，但我們想讓每個瀏覽器和版本看起來一樣。
當使用了新的 CSS 技術，舊瀏覽器或舊版本不支援，索性就讓其每個瀏覽器和版本看起來不一樣。

尤其是第二點會很常應用在「使用者的客群有一定比例使用舊瀏覽器或舊版本」的情況，例如原本畫面使用 CSS 做了一個 3D、會翻轉的效果，但舊瀏覽器或舊版本要達成一樣的目的，只能使用 javascript 達成，那就會造成效能與維護的問題，所以就需要跟設計師溝通是否可以在舊瀏覽器或舊版本使用不同設計。

各瀏覽器 Hack 技巧

本篇技巧因各瀏覽器版本不斷更新，可能會有錯誤，必要時請先測試！

IE

使用 HTML 註解來區分 IE 版本，並且使用一般常見邏輯規定可以看見的版本：

在 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]-->

CSS 屬性字首、尾

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 能看到*/
}

selector

/* IE 6, 7 才看得到 */
* html {}

/* IE 7 才看得到*/
*+html {}

瀏覽器核心的前綴 https://developer.mozilla.org/en-US/docs/Web/CSS/Microsoft_Extensions

selector {
    -ms-filter: "alpha(opacity=40)"; /* IE 瀏覽器才會應用 */
}

Classname

.ie10 .selector {}  /* IE 10 才會應用 */

@media

@media screen and (-ms-high-contrast: none) {
    selector {}
} /* IE 10, 11 才會應用 */

javascript

// IE 10 才會應用

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

or

if (/*@cc_on!@*/false && document.documentMode === 10) {
    document.documentElement.className+=' ie10';
}

Chrome

瀏覽器核心的前綴

selector {
    -webkit-property: value;
}

Firefox

瀏覽器核心的前綴

selector {
    -moz-property: value;
}

@mox-document url-prefix

@-moz-document url-prefix() { 
  .selector {
     color: lime;
  }
}

Safari

none

其他

盡量考量 CSS 的繼承，除了好維護外，也可以減少 CSS 程式碼。
@support
@media

古老且奇怪的 HTML & CSS hack https://tedium.co/2023/11/24/weird-html-hacks-history/

小結

由於 IE 可能會從世界上消失（至少一般外網使用者都不太會用到），所以 CSS hack 已經快是一個消失的藝術，因為大部分最新的瀏覽器都能供應最新的 CSS。（除非有想要特意分別或是用了太新的技術瀏覽器未支援）

作業

試著使用 CSS 如何可以分辨 IE6, IE7, IE8, IE9, IE10, IE11。

參考連結

PreviousRWD Next列印

Last updated 5 months ago

Was this helpful?

Good afternoon

hashtag2025補充

hashtag什麼是 Hack 技巧？

hashtag什麼時候需要應用？

hashtag各瀏覽器 Hack 技巧

hashtagIE

hashtagChrome

hashtagFirefox

hashtagSafari

hashtag其他

hashtag小結

hashtag作業

hashtag參考連結