欢迎来到麦麦的不老阁

记录一些关于自己在linux、网络应用、个人心情故事的文字...

关于我

我喜欢搬个小板凳坐在马路边看MM,喜欢把双手插裤兜...更多机密资料... »

Member Login

Lost your password?

麦麦的不老阁

关注互联网,爱生活爱拉芳!不扯谈客观,哥的博客哥做主,用低俗的文字来表述主观看法~

用!important解决wordpress图片自适应

搜集了很多种关于在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这个定义语句,应该是相当必要的。

订阅博客地址:http://www.uncle.ws/subscribe/

您可能感兴趣的相关日志

本文评论 3 comments

  1. Lxhome Leave a comment:

    不错,学习了!

  2. 逸冰 Leave a comment:

    呵呵,来学习学习

  3. 一米 Leave a comment:

    上一次主题错位就是用的这个方法改好的。

Leave a comment

玩转Linux

把Linux当玩具

Wordpress

Wordpress 程序应用

游荡互联网

在网上做点啥?

业界资讯

互联网资讯

随笔小记

随笔小记

软件快递

收集软件资讯