CSS中的未定義行為，瀏覽器的差異(一)

今天看了張鑫旭大佬的新書的有感吧，記錄一下。

Web標準未對一些場景做出明確規范，所以各大瀏覽器廠家只能根據自己的理解和喜好去實現，表現差異不是瀏覽器的bug，用計算機領域的術語描述為"未定義行為"。

比如一個例子：
CSS中的一個偽類，最常用的一個偽類:active，鼠標按下，執行改偽類對應的CSS樣式，鼠標抬起還原。

但是這種情況呢：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><style>.active-btn {display: inline-block; background-color: #cd0000;}.active-btn:active {background-color: #ae0000;}</style></head>
<body><a href="javascript:" class="active-btn">按下</a><a href="javascript:" id="button" class="active-btn">按下</a><script>var button = document.getElementById("button");if (button.addEventListener) {button.addEventListener("mousedown", function(event) {// 此處省略N行event.preventDefault();    });}      </script>
</body>
</html>

也就是鼠標按下的時候，阻止按鈕的默認行為，這樣設置可以讓拖動效果更流暢。

但是在Fiewfox瀏覽器中的：active陣亡了，而IE和Chrome的:active正常變紅，符合預期。

原因就是規范上并沒有對這種場景的具體描述，所以Firefox認為:active發生在mousedown事件之后。

然后我提了這個問題：
這里寫圖片描述
有大佬回答：

轉載于:https://www.cnblogs.com/zhangmingzhao/p/8505517.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/255326.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/255326.shtml
英文地址，請注明出處：http://en.pswp.cn/news/255326.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！