搜集了很多种关于在wordpress实现图片自适应的问题，有CSS的，也有用调用JS的，各有千秋。方法当然有多种，但是得寻找一个尽可能在兼容性、优化等方面的折中的办法，尝试了多种方式，主要问题还是关于IE6和其他浏览器兼容性问题，最后想到了之前在使用PJBLOG的时候，修改样似的时经常拿“!important”这个法宝解决样式在firefox和IE下的兼容问题。

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{ sRule!important }，即写在定义的最后面，但是呢，微软的IE浏览器是不支持这个语法的，其他的非IE内核浏览器基本都支持，所以，可以利用这一点来给IE和其他浏览器做不同的样式定义，例如：

p { color: #ff0000; } /*这是红色*/
p { color: #000000; } /*这是黑色*/

按照浏览器对CSS的处理方式，不管是firefox还是IE6下，段落文字显示的都是黑色的(#000000)。

p { color: #ff0000 !important; } /*多了一个!important定义*/
p { color: #000000; }

因为firefox能读懂 !important 这是个高优先级，所以段落文字显示是红色的(#ff0000)，但是笨笨的IE6浏览器不认识 !important，所以还是显示这段文字为黑色(#000000)。

解决wordpress日志下的图片问题:

.post .content img {
max-width:550px!important;  /*比如firefox浏览器会将图片最大宽度调整为550px，但是IE6不认识max-width这个定义*/
width: expression(this.width > 580 & this.height < this.width ? 550 : auto); /*如果是IE6浏览器，会将图片调整为550px。为什么不直接用这个定义呢？因为效能不好。*/
}

这样不管是firefox还是IE6，甚至其他浏览器，都能将图片宽度调整为550px了。

其实上面的例子，可以将两个定义语句更换一个顺序，即使不加!important，也能达到同样的效果。在解决wordpress图片自适应的同时，希望自己进一步加深!important的印象，所以用了这个定义语句，记住这个定义语句其实是相当有用的，尤其是在解决样式在IE和非IE浏览器下，边栏出现错位的问题，简直是一大法宝，这要比CSS hack强多了，例如：

.sidebar{margin:10 auto!important; margin:15 auto;}

/*有时候就是这5px就能导致错误，但是用了!important就能轻易解决问题了*/

经常写CSS的朋友，记住!important这个定义语句，应该是相当必要的。

收藏、分享这篇文章!