分类前端技术下的文章

IE6下支持png透明的写法

作者: Secbone
时间: 2012-10-23
分类: 前端技术
评论

话说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)格式的图片完全透明区域后面的内容。

对于position属性值absolute和relative的一点小测试

作者: Secbone
时间: 2012-10-22
分类: 前端技术
评论

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

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 的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。

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

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

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

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

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 	top:50px;
 	left:50px;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

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

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 	position:relative;
 	top:50px;
 	left:50px;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

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

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

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 	position:absolute;
 	top:250px;
 	left:350px;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

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

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

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

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 	position:relative;
 }
 .red{
 	width:300px;
 	height:200px;
 	background-color:red;
 	position:absolute;
 	top:50px;
 	left:50px;
 }
 .blue{
 	width:100px;
 	height:100px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
         <div class="blue"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
     </div>
 </body>
 </html>

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

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

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

<!DOCTYPE html>
 <html>
 <head>
 <title>Position Test</title>
 <style>
 .green{
 	width:600px;
 	height:400px;
 	background-color:green;
 	border:1px yellow solid;
 }
 .red{
 	float:left;
 	width:100px;
 	height:100px;
 	background-color:red;
 }
 .blue{
 	width:200px;
 	height:200px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div class="green">
     	<div class="red"></div>
         <div class="blue"></div>
         <div style="clear:both"></div>
     </div>
 	<div class="green">
     	<div class="red"></div>
         <div class="blue"></div>
         <div style="clear:both"></div>
     </div>
 </body>
 </html>

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

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

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

IE下zoom的作用

作者: Secbone
时间: 2012-10-16
分类: 前端技术
评论

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 哈哈

对于float属性的一些理解

作者: Secbone
时间: 2012-09-20
分类: 前端技术
评论

今天下午，几个人在屋里研究了一下css的float属性，因为这是一个很有用也让人很蛋疼的属性，下面把自己的一些小理解分享一下~

首先，我们先来写一个有三个div是float的一个页。。。

<!DOCTYPE>
 <html>
 <head>
 <style>
 #box{
 	width:400px;
 	height:800px;
 	background-color:black;
 }
 #red{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:red;
 }
 #yellow{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:yellow;
 }
 #green{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:green;
 }
 </style>
 </head>
 <body>
 	<div id="box">
 		<div id="red"></div>
         <div id="yellow"></div>
         <div id="green"></div>
 	</div>
 </body>
 </html>

额。。。好吧，怎么看着有点儿像某个国家的国旗？！。。。。好吧好吧，先这样吧。。。。

然后我们在这三个div下面在加一个div，但是不设置float属性。。。

<!DOCTYPE>
 <html>
 <head>
 <style>
 #box{
 	width:400px;
 	height:800px;
 	background-color:black;
 }
 #red{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:red;
 }
 #yellow{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:yellow;
 }
 #green{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:green;
 }
 #blue{
 	width:400px;
 	height:100px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div id="box">
 		<div id="red"></div>
         <div id="yellow"></div>
         <div id="green"></div>
         <div id="blue"></div>
 	</div>
 </body>
 </html>

有木有发现什么？是滴，这个div直接无视掉了前面三个div，丝毫无压力的占据了三个div底下最靠上的位置。。。。

一般按照我们的理解，这个新的div应该是会被前面三个div的位置挤下去，呆在屏幕下面的位置，而现在它却好像是与另外三个div平起平坐的位置，丝毫没有感觉到它们的存在。。。

这是为什么呢？我们的一种猜测是，float的元素是没有体积的，他们的体积是单独算的。。。

那么我们来试一下。。。。

我们把最外面的box的的高度去掉来看一下效果。。。

<!DOCTYPE>
 <html>
 <head>
 <style>
 #box{
 	width:500px;
 	background-color:black;
 }
 #red{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:red;
 }
 #yellow{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:yellow;
 }
 #green{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:green;
 }
 #blue{
 	width:400px;
 	height:100px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div id="box">
 		<div id="red"></div>
         <div id="yellow"></div>
         <div id="green"></div>
         <div id="blue"></div>
 	</div>
 </body>
 </html>

可以看到，最外面的box高度只是blue这个div撑起来的一点，也丝毫没有三个float的div的存在感。。。

那么，基本上就可以证明float元素的体积是不与其他元素一起计算的。。。

但是，float元素它们到底在哪呢？

由刚才的实验我们看到，float元素是浮在其他元素之上的。。。。

总结一下今天下午的理解：

float元素是类似于漂浮物的浮在其他元素之上，而其他元素则是类似于在水下的感觉，对于它们来说，它们是感觉不到float的存在的，这也就出现了前面的无视float元素体积的现象。。。。

而大部分时间我们是希望其他元素能感觉到float元素的存在的，这时候，我们有2种办法：

一种方法是：我们可以把其他元素也写上float属性，使它们从水底浮到水面上来，与float元素一层，这样也就感觉到float元素了。。。

还有一种方法就是：我们可以在float元素后面加上一个div，这个div写上clear属性，就是这样。。。。

<!DOCTYPE>
 <html>
 <head>
 <style>
 #box{
 	width:400px;
 	height:800px;
 	background-color:black;
 }
 #red{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:red;
 }
 #yellow{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:yellow;
 }
 #green{
 	float:left;
 	width:100px;
 	height:600px;
 	background-color:green;
 }
 #blue{
 	width:400px;
 	height:100px;
 	background-color:blue;
 }
 </style>
 </head>
 <body>
 	<div id="box">
 		<div id="red"></div>
         <div id="yellow"></div>
         <div id="green"></div>
         <div style="clear:both"></div>
         <div id="blue"></div>
 	</div>
 </body>
 </html>

这样的话，它会清除float元素的影响，让其他元素可以感知到float元素的存在，从而实现我们想要的效果。。。。

嗯嗯，大概就是这个样子，有什么理解不对的地方还请大牛们多多指教哈~

设置SPAN的高度

作者: Secbone
时间: 2012-09-19
分类: 前端技术
评论

span要设置高度，必须要转换成block元素才可以：

display:block;

但是这样就会使span占据一整行的位置，一般来说这样是很蛋疼的。。。。

今天看到一个方法：

display:inline-block;

这样就可以实现把span转换成block元素又可以使span不至于占据一整行的位置了，o(∩_∩)o 哈哈，完工~

PS：

好吧，inline-block属性是firefox,chrome,ie8及以上版本支持,而ie6/ie7是不支持的，那么如何在ie6/ie7下实现我们想要的样子呢？

ie6/ie7下可以用下面这种方法来实现inline-block的效果：

display:inline;

zoom:1;

那么我们就可以这样来解决兼容性问题：

display:inline-block;

*display:inline;

*zoom:1;

嗯嗯，完工啦~ o(∩_∩)o 哈哈

这里鸣谢一下小松哥~ 有问题的话还希望大家多多指正哈~