三个有趣的CSS3网站

看到了三个很有趣的网站，都是关于CSS3的，挺有意思，先留位，有空再研究~

http://knb.im/css3/

http://desandro.com/articles/opera-logo-css/

http://shdianji.com/danboard.html

CSS, CSS3

打印文章

这篇文章由xoboy于2010-05-25 17:54发表在Discovery。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。

没有评论

没有引用

打败IE的CSS bug table

大约1月前 - 没有评论

来自一个微博博友的一则文章，看来IE6让大部分做前端开发的设计者们大伤脑筋，的确，正如他所说的，搞定了IE6就等于搞定了半壁江山了：）以下是他整理出来的一个关于IE bug的列表，以供日后设计之用，收藏价值很高，在这里转发一下！

问题
浏览器
DEMO
解决方法

Hacking Rules: property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;

1
input[button | submit] 不能用 margin:0 auto; 居中
IE8
bug | fixed
为input添加width

2
body{overflow:hidden;}没有去掉滚动条
IE6/7
bug | fixed
设置html{overflow:hidden;}

3
hasLayout的标签拥有高度
IE6/7
bug | fixed
*height:0;
_overflow:hidden;

4
form>[hasLayout]元素有margin-left时，子元素中的[input | textarea] 出现2×margin-left
IE6/7
bug | fixed
form > [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;}

5
当border-width有1条<边3条时被设置成dotted时，1px的边dotted显示成dashed
IE7
bug | fixed
不在同一个元素上使用不同宽度的 dotted

6
当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible;
IE6/7
bug | fixed
给父元素设置position:relative;

7
:hover伪类不能改变有position:absolute的子级元素的left/top值
IE7
bug | fixed
把top/left的值设置成除0%外的所有百分值；或添加一个margin-[所有方向]除0外的所有值，包括0%

8
:focus + selector {} 选择器失效
IE8
bug | fixed
在失效选择器后面添加一个空选择器, :focus{}

9
列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-style
IE8
bug | fixed
用背景图片替换list-style

10
th 不会自动继承上级元素的 text-align
IE8
bug | fixed
给th添加text-align:inherit;

11
样式(包括link/style/@import(link)) 最多允许个为是：32
IE6-8
─ 常识
99.99%的情况下，不会遇到

12
:hover 时若background-color为#fff, 失效
IE7
bug | fixed
把background-color改成background。或者，非#fff ||

在帕兰印象看到的关于CSS技巧的收集文章，转载一下，给自己收藏学习之用！
1. CSS布局和用户界面技巧
当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面，有几乎无限的可能性。下面是一些更有趣的CSSCSS技巧。
The simplest way to horizontally and vertically center a DIV
本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码，但这个特殊方法仅使用一个 DIV 元素，并且简单得多。

New CSS Sticky Footer – 2009
一个棘手的完全跨浏览器兼容的页脚CSSCSS技巧，兼容 Google Chrome 浏览器，并且不需要空 DIV 辅助。
Simple Page Peel Effect with jQuery & CSS
此教程结合 jquery 和 CSS 创建网页剥离效果。大多数网站都使用 Flash 来实现这种效果。因此如果不热衷于 Flash 技巧，这会是一个不错的选择。

Equal height boxes with CSS
一个使用 CSS

最近在研究最新版的WP

大约3月前 - 没有评论

很久没有碰过WP了，因为一个网友而触发了自己重新关注WP的兴趣。现在已经发布了2-9-2版本了，据说3.0测试版都已经提供下载了，信息万变，更新的速度那个快啊~
新版本的管理界面比原来更人性化了（仅限于2.5版本与新版的比较），模板的功能也大大提高了，编辑起来更得心应手，即使你不太懂CSS，也能编辑出一个属于自己个性化的结构，看来我们这些略懂CSS的人也要退化了：）

CSS经典技巧十则

大约7月前 - 没有评论

在我一个同事的blog里面看到的，搜集过来了。
1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2. 同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
<p class=”text side”>…</p>
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
补充：对于一个ID，不能这样写<p id=”text side”>…</p>也不能这样写
3. CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如：
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box { width:

再谈IE的hack

大约7月前 - 没有评论

最近频频接触CSS，对不同浏览器的显示效果不同很纠结。现再收集一下关于IE的hack。
1. 区别FF和IE
1-1
首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子：
插入代码：
div{
background-color: red !important;
background-color: blue;
}
因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。
1-2
还有一种方法，就是IE浏览器可以识别“>”等一些符号，如“~”、“`”、“
插入代码：
div{
background-color: red;
>background-color: blue;
}
在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“>”，则应该得到的蓝色的背景，因此可以知道“>”只有IE可以识别。
这样，我们就可以把FF和IE的样式分离开。下面就是解决IE自己的问题了。
2. 区别IE5.5和IE的其他版本
看一个例子：
插入代码：
div{
>background-color: black;
>background-color /*IE5.5*/: green;
}
这个例子使用了“>”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。
到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。
3. 区别IE5与IE5.5+
插入代码：
div{
>background-color: red;
}
div/*IE5.5+*/{
>background-color: black;
}
这里我们又用到一个HACK，就是“div/**/{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。
4. 完整的Hack
这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：
插入代码：
div{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”，因为“div/**/{}”这个HACK在FF中可以识别。
#hackme{
/*style for all browser here*/
}
* html #hackme{
/*style for ie here*/
}
下面是一个ie6 png hack，用于内联css
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
IE7的hack
IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack

补充说明图片垂直居中的问题

大约7月前 - 没有评论

由于IE与Firefox对CSS的解释不同，往往让我们在对一个图片处于一个div内垂直居中的问题伤透脑筋。上一篇讲述到用top:50%的方法，现在再展开补充说明一下。
首先我们定义一个放置图片的容器
.box{width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC;}
为了更清楚看到效果，我定义了这个box的边框和背景色。
然后我们在这个容器内再多放置一个
.imgbox {display:table-cell; vertical-align:middle; text-align:center;}
由于IE不支持CSS2中的display:table和display:table-cell，而对于能解释这两个属性的浏览器来说，做到垂直局中到这里就已经足够了。因此我们要针对IE再下点功夫。对htm我们可以这样写：
<div class=”box”>
　<div class=”imgbox”><p><img src=”图片的位置” /></p></div>
</div>
然后针对IE我们补充hack的内容：
.box {*position:relative;}
.imgbox {*width:100%;*position:absolute; *top:50%; *left:0;}
　.imgbox p {*position: relative; *top:-50%; *margin:0; *padding:0;}
　.imgbox img{ *margin-top:4px;}
对IE来说，用了绝对定位和相对定位，通过两次50%的偏移找到了图片所在div的中心，因此完整的CSS应该为：
.box { width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC; *position:relative;} /*这个层的长宽可以自定义*/
.imgbox { display:table-cell; vertical-align:middle; text-align:center; *width:100%; *position:absolute; *top:50%; *left:0;}
　.imgbox p {*position: relative; *top:-50%; *margin:0; *padding:0;}
　.imgbox img{ *margin-top:4px;}
大功告成！

几个CSS的技巧

大约8月前 - 没有评论

很多朋友在编写html的时候往往会被一些小问题所困扰，这里介绍几个小小的技巧。
1. 防止图片撑破div层
.div-img {margin: auto; width: 600px;}
.div-img img{max-width: 100%!important; height: auto!important; width:expression(this.width > 600 ? “600px” : this.width)!important;}
2. 让div的内容图片垂直居中（可兼容多浏览器）
.div-img {*position:absolute; top:50%;}
.div-img img {*position:relative; top:-50%; left:-50%;}
3. 让文字从右往左竖排写
.text { layout-flow: vertical-ideographic; height:400px; line-height:200%; }

简单而实用的CSS属性：min-height

大约9月前 - 没有评论

今天讲解一下一个简单而实用的CSS属性：min-height，它允许你指定元素的最小高度，在需要平衡布局时非常有用。看看下面的图解就一目了然了。

一般写法：
.with_minheight {
　　min-height: 550px;
}
但需要注意的是，IE6不支持min-height（又一个要杀死IE6的理由），但是有一个min-height hack的写法：
.with_minheight {
　　min-height:550px;
　　height:auto !important;
　　height:550px;
}
以后在进行多栏式的布局时可以用这个属性控制美观度:coolsmile:

什么是CSS hack

大约1年前 - 没有评论

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如 IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。等等
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
如何写CSS Hack
比如要分辨IE6和firefox两种浏览器，可以这样写：
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>
解释一下：

上面的css在firefox中，它是认识不了后面的那个带星号*的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。
CSS hack:区分IE6，IE7，firefox区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange;*background:blue;
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

IE6
IE7
FF

*
√
√
×

!important
×
√
√

另外再补充一个，下划线”_”, IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
div{: background:orange;
*background:green;
_background:blue;}
div{: background:orange;
*background:green;
_background:blue;}
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面
付:CSS hack 列表图