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

你可能感兴趣的:(asp.net)