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，以为则会这个属性永远胜出。