搜集了很多种关于在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日志下的图片问题(各个主题的样式定义可能不一样，一般搜索img能搜索到):
.post .content img {
max-width:550px!important; /*比如firefox浏览器会将图片最大宽度调整为560px，但是IE6不认识max-width这个定义*/
width: expression(this.width > 560 & this.height < this.width ? 560 : auto);/*如果是IE6浏览器，会将图片调整为560px。为什么不直接用这个定义呢？因为效能不好。*/
}
这样不管是firefox还是IE6，甚至其他浏览器，都能将图片宽度调整为560px了。
其实上面的例子，可以将两个定义语句更换一个顺序，即使不加!important，也能达到同样的效果。在解决wordpress图片自适应的同时，希望自己进一步加深!important的印象，所以用了这个定义语句，记住这个定义语句其实是相当有用的，尤其是在解决样式在IE和非IE浏览器下，边栏出现错位的问题，简直是一大法宝，这要比CSS hack强多了，例如：
.sidebar{margin:10 auto!important; margin:15 auto;}
/*有时候就是这5px就能导致错误，但是用了!important就能轻易解决问题了*/
经常写CSS的朋友，记住!important这个定义语句，应该是相当必要的。
转载请注明出处：麦麦的不老阁 » 《用!important解决wordpress图片自适应》
您可能感兴趣的相关日志
不错，学习了！
呵呵，来学习学习
上一次主题错位就是用的这个方法改好的。