:hover在IE6 and earlier下的问题

作者:飘零雾雨日期:2009-04-09

　　在处理css的机制上，IE总是有很多让人吐血的举动，但对于他们现在的改进力度还是值得高兴的。

　　就拿对伪类:hover的支持来说，IE7+终于添加了对a以外其它标签的支持。对于这样的改进，当然是要拍手称快的，但在IE6下，:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。

　　很多人可能都已经知道了:hover在IE6及更早浏览器（以下称IE6-）下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。

　　有的时候为了增加一些简单的动态效果，常常会借助:hover的帮忙，比如我们时常会令鼠标经过链接时改变文字的颜色。如：

a:hover{color:#F00;}

<a href="?">鼠标经过时改变我的颜色</a>

Tags: css css ie ie :hover :hover

分类:CSS | 固定链接 | 评论: 13 | 引用: 0 | 查看次数: 1954

一条可以区分常用主流浏览器的css hack

作者:飘零雾雨日期:2009-04-08

转载请注明出处，css探索之旅-飘零雾雨的庄园

　　近段时间一直处于待业中，加上之前工作比较忙，好几个月都没有更新Blog了。一件事如果不想着去做，或者不主动去做，时间一长，就会成为一种习惯。

　　该死的css hack，是的，有时候我也会这么骂，但目前看来确实还无法完全将它扔掉。现在有不少需求都要求兼容Safari, Chrome等浏览器，甚至有的项目还要照顾到IE5.5，虽说不大赞成高频次的使用css hack，但有的时候还是需要用上的。我整合了一个可以同时区分IE5.5, IE6, IE7, Firefox/Opera, Safari/Chrome的CSS hack，网络上可能还会有比这更简洁的版本。就当是做个记号算吧。

　　[演示地址：http://www.doyoe.com/model/xhtmlcss/style/csshack.htm]

Code：

.test{
color:#00C;                           /* For IE5.5 */
voice-family:"\"}\"";
voice-family:inherit;
color:#000;                           /* For FF,OP */
[color:#000;color:#0F0;]      /* For SF,CH */
*color:#FF0;                         /* For IE7 */
_color:#F00;                        /* For IE6 */
}

　　通过以上的样式，你可以在IE5.5里看到蓝色的字，IE6里看到红色的字，IE7看到的是黄色的字，Firefox/Opera看到的是黑色的字，Safari/Chrome看到的是绿色的字。这里没继续将Firefox和Opera，Safari和Chrome区分。

分类:CSS | 固定链接 | 评论: 6 | 引用: 0 | 查看次数: 1489

如何让IE6也具有min-height效果

作者:飘零雾雨日期:2007-11-12

具有min-height效果的IE6也是非常帅滴，那么如何使得IE6也能拥有该效果呢？

分类:CSS | 固定链接 | 评论: 18 | 引用: 0 | 查看次数: 5688

CSS切割背景应用补遗

作者:飘零雾雨日期:2007-07-06

　　转载请注明出处，css探索之旅-飘零雾雨的庄园

　　上篇文章讲了合并图片，用CSS切割以减少图片请求次数，并利用CSS进行背景图片切割渲染的例子。这篇文章将是对css sprites一个补充，在平时的设计中可能会经常使用到下面将要讲的这个效果。

　　这次将背景切割结合A（链接）的一些伪类来进行实际应用，以展示鼠标经过链接时出现不同的效果。

　　直接进入正题，先看最终效果再说：

　　［效果演示：http://www.doyoe.com/model/xhtmlcss/style/cssimg/2.htm］

CSS部分：

html,body{
font:14px/2 Georgia, Verdana, Arial, "宋体";
text-align:center;
}
#list{
margin:0;
padding:0;
list-style:none;
}
#list li a{
padding-left:15px;
background:url(skin/point_01.gif) 0 6px no-repeat;
color:#333;
font-size:12px;
}
#list li a:hover{
background-position:0 -4px;
color:#050;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>DY CSS切割背景应用补遗</title>
<meta name="description" content="使用css sprites技术切割合并背景图片以减少HTTP请求" />
<meta name="keywords" content="css sprites, 图片切割, 图片合并, HTTP请求" />
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<h1>把图片做成一张，节省请求次数</h1>
<ul id="list">
<li><a href="">测试用一张图片代替两张图片</a></li>
<li><a href="">测试用一张图片代替两张图片</a></li>
<li><a href="">测试用一张图片代替两张图片</a></li>
<li><a href="">测试用一张图片代替两张图片</a></li>
<li><a href="">测试用一张图片代替两张图片</a></li>
</ul>
</body>
</html>