当前位置：一起CSS
日期：2008-12-27 分类：CSS
别说IE6不认识 !important ,它们只是不够默契。
IE6 对 !important 的支持存在 bug ，有很多人因此作为 IE6 的 hack 。用多了，传多了，很多人就说 IE6 不支持 !important ，给新人带来一些影响。
在《IE6下!important的bug》中已经说了这个问题，现在再举几个例子说明这个问题，以下面的 XHTML 代码为例：
<ul id="list">
<li class="first">这里是第一行文字</li>
<li>那这里就是第二行文字咯</li>
<li>这里应该是第三行里吧</li>
<li>这里绝对是第四行了</li>
</ul>
第一个例子的 CSS 代码：
ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
#list li{
color:blue;
}
.first{
color:red !important;
}
点击这里查看效果
在 IE6 里，第一行文字为红色，!important 起作用了。如果 .first 不加 !important ，那么在所有浏览器中第一行都显示蓝色，因为 #list li 的权重比 .fisrt 高。当然 .first 改写成 #list .first 会更好，但为了举例子，所以不这样写。
第二个例子的 CSS 代码：
ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
.first{
color:red !important;
}
.first{
color:blue;
}
点击这里查看效果
同样，!important 在 IE6 里起效果了。
再看第三个例子的 CSS 代码：
ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
.first{
color:red !important;
color:blue;
}
点击这里查看效果
这次 !important 在 IE6 里就不起效果了。
综合上面三个例子得出这么一个结论：在同一个选择器内有重复的属性的话，此选择器内的此属性的 !important 在 IE6 里无效。
所以，并不能说 IE6 不支持 !important ，只是支持的不够好。
查看：1,160 评论：5 标签：!important,IE6
日期：2008-12-20 分类：CSS
随着网络的发展，CSS 也在不断的完善，充分吸取多年来 Web 发展的需求，提出了很多新颖的 CSS 特性，例如很受欢迎的圆角矩形 border-radius 属性，但很可惜，此属性目前没有得到任何浏览器的支持。
对于一些浏览器，它们有其私有的圆角属性。如 FF 的 -moz-border-radius ，Safari 和 Chrome 的 -webkit-border-radius 。效果见下图：
FF 的圆角
Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核，这里就只附 Chrome 的效果了)
IE 和 Opera 就没有私有的圆角属性了，如果有的话，那制作圆角应该就简单多了，把各自的私有属性全部写上，让各个浏览器“对号入座”，就达到了“兼容”的效果。
查看：756 评论：6 标签：CSS圆角,圆角
日期：2008-12-16 分类：CSS
今天来用 CSS滤镜来制作圆角效果。正如你所知道的，CSS滤镜只有 IE 浏览器支持，所以这种方法不能真正的用到实际当中，所以就当做是了解一下咯。
首先来看一个例子，点击这里查看（用 IE 浏览器喔）。
看了上面的例子，也许你就知道制作的原理了。我们只用《一张图片实现圆角》例子中圆圈图片的1/4（左上部分）：
，放 4 张，对相应的图片进行相应的翻转，然后定位到父容器的相应位置，就实现了圆角。
代码实现
XHTML代码：
<div id="box">
<h3>CSS滤镜制作圆角</h3>
<img class="img1" src="images/yuan9.jpg" />
<img class="img2" src="images/yuan9.jpg" />
<img class="img3" src="images/yuan9.jpg" />
<img class="img4" src="images/yuan9.jpg" />
</div>
CSS代码：
*{
margin:0;
padding:0;
}
#box{
position:relative;
width:400px;
margin:20px auto;
border:1px solid #000;
}
img{
position:absolute;
}
.img1{
left:-1px;
top:-1px;
}
.img2{
right:-1px;
top:-1px;
filter:fliph;/*水平翻转*/
}
.img3{
bottom:-1px;
left:-1px;
filter:flipv;/*垂直翻转*/
}
.img4{
right:-1px;
bottom:-1px;
filter:fliph flipv;/*水平垂直翻转*/
}
h3{
padding:20px 0;
text-align:center;
}
查看效果
和《一张图片实现圆角》一样，如果父容器的高度为基数，圆角在 IE6 里下方也会出现一条横线。
查看：627 评论：没有评论 标签：CSS圆角,圆角
日期：2008-12-15 分类：CSS
前两天在的 Nathan Smith 的博客上看到他的 hoverbox ，觉得非常的精彩。这是一个图片集，当鼠标移动到每张小图片上，就会有一张大图片出现。他的制作原理是：在标签 a 里放两张一样的图片，第一张图片设置成较小的尺寸，第二张先隐藏，当鼠标移动到第一张图片上时，就让第二张图片显示。原文地址和例子地址如下：
原文地址：http://sonspring.com/journal/hoverbox-image-gallery
例子地址：http://host.sonspring.com/hoverbox/
效果预览：
从上面的例子可以看到，为了兼容 IE6 ，用了两张样式表。我在想：能不能只用一张样式表？我把他的两张样式表合在一起后，在 IE6 、IE7 、FF 、opear 中浏览没有任何问题，然而在 Chrome 中去没有效果了。我就在想：能不能修改修改，只用一张样式表，并且能在上述所有浏览器中实现效果。经过多次修改实验后，终于实现了。我给第二张图片套了一个 span 标签，CSS 代码也做了一定的修改。详细例子请点击这里查看。
原先我一直都认为 CSS 没有逻辑性，所以不会有太大的灵活性或可变性（不知道用词是否恰当），但现在却越来越觉得：CSS 虽然是死的，但人是活的。活生生的人有各种各样不一样的想法。就如的这个例子，要制作这种效果，我们一般会想到 javascript ，但他却突破常规，完全只用 CSS 。
=======华丽的分割线=========================================
读者“老鼠”提出上面修改的例子不兼容 IE8 beta 2 ，所以特意装上了 IETester 进行查看，看到确实不行。在 IE8 beta 2 里的效果是：鼠标第一次移动到小图片上的时候，效果正常，大图片出现在了指定的位置。然而第一次之后，大图却跑到浏览器左上角去了，似乎第一次之后，大图的绝对定位是以浏览器窗口为基准。经过检查之后，发现是 .img1{display:block} 导致的，原本此属性是为了修复 img 3px bug 的，没想到却导致在 IE8 beta 2 里出现异常（不知道这算不算 IE8 的 bug），让人不能理解。既然这条属性有问题，那就换一种解决办法，改成 .img1{vertical-align:top} ,次属性也能修复 img 3px bug ,并且使例子在 IE8 beta 2 里正常。修复后的例子请点击这里查看。
再次感谢“老鼠”的测试！（2008.12.18）
查看：649 评论：6
日期：2008-12-12 分类：CSS
一张图片就能实现圆角？是什么样的图片？怎样实现？
其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片：
，太小了是吧，不过已经够了。
基本思路
准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。
图片示意：
代码实现
XHTML代码：
<div id="container">
<h1>一张图片实现圆角</h1>
<b class="lt"></b>
<b class="rt"></b>
<b class="lb"></b>
<b class="rb"></b>
</div>
四个 b 为小容器，不要管它们，放上去就是了。
CSS代码：
*{
margin:0;
padding:0;
}
#container{
position:relative;
margin:20px auto;
padding:20px;
width:400px;
height:50px;
border:1px solid #000;
}
b{
position:absolute;
width:5px;
height:5px;
font-size:0;
background-image:url(images/yuan8.jpg);
background-repeat:no-repeat;
}
.lt{
left:-1px;
top:-1px;
background-position:left top;
}
.rt{
right:-1px;
top:-1px;
background-position:right top;
}
.lb{
left:-1px;
bottom:-1px;
background-position:left bottom;
}
.rb{
right:-1px;
bottom:-1px;
background-position:bottom right;
}
h1{
text-align:center;
font-size:24px;
}
查看效果
这种方法似乎很完美，但遗憾的是：如果父容器（本例为 #container）的高度为基数时，在 IE6 里下方会出现一条横线，如下图：
所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。
另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例中不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美（IE bug 真多 -_-!）。
查看：1,086 评论：5 标签：CSS圆角,圆角
