2012年10月

    话说png是个好东西,但是一般好东西IE6都不支持(万恶的IE6啊~)

    在IE6下用透明的png时会有一个灰色的背景,很难看(还好,IE7就已经开始支持png的透明了)

    那么我们怎么样才能让万恶的IE6支持png透明的,下面我们来看个例子

    一般我们写代码是这样写的:

.bg{

    width:10px;

    height:10px;

    background:url(../images/tm.png) no-repeat;

}

这样的话是不兼容ie6的,所以我们应该改成这样:

.bg{

    width:10px;

    height:10px;

    background:url(../images/tm.png) no-repeat !important;  /*支持IE7,FF*/

    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tm.png');   /*支持IE6*/

    _ background-image: none;   /*支持IE6*/

}

 

    filter是微软提供的一个加载透明的一个滤镜,用它就可以来实现IE6下的透明效果了

    这里要注意的是:用滤镜加载的时候的相对路径是相对网页文件的位置,而不是原来的相对css文件的位置,所以这里希望大家注意一下。。。

 

    嗯嗯,大概就是这样。。。 最后把filter这个路径的参数贴出来,大家参考一下~

 

    PS:发现自己最近跟前端关系有点亲密,是不是在预示着什么捏。。。。  = =!

 

filter语法:

    filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

 

    enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。

    false : 滤镜被禁止。

     sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。

    image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

    scale : 缩放图片以适应对象的尺寸边界。

    src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

特性:

    Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。

    sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。

    src : 可读写。字符串(String)。参阅 src 属性。

说明:

    在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。

    PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

在开始小测试之前先来看看这两个属性值的定义:

CSS2.0 HandBook上的解释: 

    设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )。 

    要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。 

    TRBL属性(TOP、RIGHT、BOTTOM、LEFT)只有当设定了position属性才有效。 

    当设定position:absolute 

    如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 

    如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。 

    当设定position: relative 

    则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以BODY 的左上角为原始点。相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

    

    那么下面我们来通过代码来认识一下:

    


这里我们有两个绿色的div,里面分别有一个红色的小div

那么,下面我们给红的的div设置一下top和left属性


我们发现红div并没有移动,这是因为我们没有设置position属性,没有给它参照物,那么,我们给红色的div加上一个position:relative看看


我们发现两个红色的div都相对于它原来的位置偏移了,这正和上面定义说的relative是相对于自己原来的位置偏移一样

那么我们把position属性设置成absolute会是什么样的呢?


我们发现两个红色的div重叠到了一起,并且我们发现这两个红色的div可以独立的跳出绿色的div,这里我们就可以知道absolute这个值的参照物是同一个———屏幕左上角,也就是body标签。

那么就有一个问题,既然我们知道absolute这个值是单独拿出来排布的,也不占空间(因为relative只是对于原来的位置偏移,元素还是占据它原来的空间),那么我们有时候希望某些元素可以不占据空间但又能参照自己的父级元素进行定位时,我们该怎们办呢?

其实只要把父级元素的position设置成relative就可以了,我们来看下效果:


我们可以看到,红色的div已经是absolute了,但是它还是实现了同前面relative时一样的布局效果,并且它并没有占据体积,所以后面的蓝色的div可以很顺利地占据顶头的位置。


嗯嗯,大概要说的就这么多。。。。


额,最后,到了我提问题的时间了,代码如下:


红色的div是flout:left的,然后后面有一个蓝色的div,再然后clear掉了。

问题是,然后在chrome下,蓝色的div占站在了顶头的位置,也就是说chrome是先渲染了蓝色的div然后再把红色的div给clear了,而在IE6,7,8(IE9没测)下是先clear掉了红色的div之后,再渲染蓝色的div,也就是红色的div有了体积以后再渲染了蓝色的div,所以蓝色的div被挤开了。。。

希望前端大牛能帮我指点一下,正确的渲染和clear的顺序应该是什么样的? 遇到这样的情况要怎么兼容? 先谢谢啦~

    话说周末去参加了个Adobe和W3C一起弄得TTWF的一个hack活动,主要是写CSS3的case和找bug(好吧,我承认我又去打酱油了。。。。)

    虽说去打了一天酱油,什么都没写,不过感觉那的气氛确实很好,也感觉到CSS3的众多可爱之处,还有就是漫山遍野的MAC本。。。(乔帮主,你赢了~)

    顺手偷回来一点弹性盒的资料,分享一下(也给自己mark一下,以后能看懂了再看。。。= =!),希望能给还在CSS3前线奋斗的战士们一点帮助~

    http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans#order

    嗯嗯,就这么多了~

    

    PS:其实主要是好久没更新日志了,来更新一下~  o(∩_∩)o 哈哈

    zoom是IE的一个私有属性,它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。
Zoom的使用方法:
zoom : normal | number
 
 normal :  默认值。使用对象的实际尺寸
 number :  百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值 用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比。如:zoom:1,zoom:120%。 而这个属性只要在IE中才起作用,所以很少用到它的实际用途,而最经常用到作用是清除浮动等,如:
 .border{
     border:1px solid #CCC;
     padding:2px;
     overflow:hidden;
     _zoom:1;
 }
 _zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例,
但这里overflow:hidden;和_zoom:1;是连起来用的,作用是清除border内部浮动。
同理,还可以使用同样方法清除margin属性在IE浏览器中的重叠问题。
 
  
 
 在这里继续鸣谢小松哥~ o(∩_∩)o 哈哈

今天下午正上着网呢,突然间一个电话就过来了,赶紧接了。。。

 

“您好,这是xx市联通公司,现在联通正在推出来话宝业务,方便你在手机关机或者是没信号的时候把来电以短信的方式提醒您。。。。。(此处省略N多字。。。)”

“对不起,我不需要。。。。”

“那好,来话宝业务每月资费3元,我就给您开通了,谢谢您的支持~”

嘟。。。 嘟。。。。 嘟。。。

“我不。。。。”

 

挂了。。。  她挂了。。。  她丫竟然挂了!!!!!

连个还嘴的机会都不给呀~  亲~  你这是要闹哪样儿呀。。。。。

推销业务也不带这么推销的呀。。。  你这就是通知我让我每个月多给你们3块钱呀~

亲~  咱不带这样的好么~   内牛满面呀~

今天才发现原来emlog都升级到5.0了,果断down了补丁升上来,哇哈哈哈,感觉很给力呀~  心情大好,顺便换了个模板。。。。

额,好吧,这个模板把我博客的标题搞成这样是居心何在呀。。。。。  = =!

算了,看在你整体做的还不错的面子上,先饶了你。。。。   调整了一下数据以后,悲剧的发现竟然没有了友链。。。。 

额。。。。  好吧,所以顺便说一下吧,友链这个问题我会找时间解决的,所以还请在本博客有友链的朋友们谅解哈~

好吧,侧边栏能有的都没有了,包括那个豆包。。。 (蟲某人,对不住啦~)

 

就先说这么多,最后为我那个死去的十一假期祭奠一下~

 

PS:由于模板兼容性问题,还请非chrome用户。。。。。额。。。   换个chrome吧~