ASP.NET中Image控制項border-width的一個詭異的BUG

今天開發一個圖片列表的頁面，這個頁面有許多.NET 的IMAGE控制項，用CSS控制這個img的時候用到以下代碼：

.GoodsList li a img {border: 1px solid #ccc ; height:100px; width:100px}

這時候，奇怪的事情發生了：瀏覽器不顯示圖片邊框。

仔細檢查了CSS字碼頁沒有問題，查看原始碼時，發現這個IMG在html中多了一個屬性：

 

style="border-width:0px;" 

 

網上搜尋以後發現這是一個.NET控制項的BUG，但是網上的解決方案很複雜。之後搜尋了英文網站，發現了一個最簡單的方法，可以將以上CSS代碼改為：

.GoodsList li a img {border: 1px solid #ccc !important; height:100px; width:100px} 

隨後發布，顯示正常。

關於!important

!important具有保護的作用，在任何需要保護的屬性後面插入它可以避免被基於特性的屬性覆蓋。例如：#nav a{color:red;} a{color:teal !important},通常，一個帶有id名#nav的元素裡的一個連結會變設設位紅色，因為這個#nav a比標籤樣式具體的多，但因為包含了!important，以為則會這個屬性永遠勝出。