简单而实用的CSS属性：min-height
今天讲解一下一个简单而实用的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:
| 打印文章 | 这篇文章由xoboy于2009-12-11 16:07发表在Design。你可以订阅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技巧
大约3月前 - 没有评论
在帕兰印象看到的关于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
三个有趣的CSS3网站
大约3月前 - 没有评论
看到了三个很有趣的网站，都是关于CSS3的，挺有意思，先留位，有空再研究~
http://knb.im/css3/
http://desandro.com/articles/opera-logo-css/
http://shdianji.com/danboard.html
最近在研究最新版的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%; }
微软的9个试错产品[zz]
大约8月前 - 1个评论
我们所熟知的微软产品，配合了错误的市场策略便成为了错误的产品。
Xbox & Xbox 360
忽略行业特性，盲目扩大自身优势，产品与市场脱节
产品历程
2001年11月15日，在纽约和旧金山启动午夜首卖的Xbox正式加入游戏主机的战局。与同时代的索尼PS2和任天堂的Game Cube相比，内装英特尔奔腾3处理器的Xbox是当时硬件性能最强大的一款游戏主机。
2002年11月，微软开始陆续提供Xbox Live在线游戏服务。它可以提供包括在线玩家列表、多人联网游戏、语音在线聊天和玩家积分排行榜等功能的互联网服务。2005年，Xbox的销量已突破 2000万台，稳坐市场第二把交椅，但这是建立在每台299美元的低廉售价基础上的—它让微软每卖出一台Xbox就倒贴125美元。当微软准备靠Xbox 360再度决战索尼PS3的时候，它在游戏硬件设备上已经蒸发了几十亿美元。
2005年11月推出的Xbox 360是一个难以弥补的灾难。直到20个月后，微软才公开承认Xbox 360存在质量问题并且准备花费10亿多美元进行修复。现在，人们会提起索尼PS3和任天堂的Wii，但抱歉，没几个人还记得Xbox 360。
症结
一款性能堪比电脑的游戏主机未必是玩家最需要的游戏主机，这是微软在Xbox时期犯下的最明显的错误。盲目追求主机的性能却忽视了游戏的内容，一直以来，Xbox支持的游戏数量显然不及竞争对手索尼和任天堂。
而为了抢在索尼和任天堂之前仓促推出的Xbox 360，为了获得更小巧的体积，在许多性能方面被迫做出了让步。但随着Xbox 360有了更强大的系统和更大的存储能力，对散热性等的要求也就越来越高，最终导致硬件上频频出现问题。
主要竞争对手
PS2(vs Xbox)、 PS3(vs Xbox 360)/索尼
Game Cube(vs Xbox)、Wii(vs Xbox 360)/任天堂
试错法则
在开发一款游戏主机的时候把注意力完全放在了硬件而非游戏行业的生态系统上，与索尼和任天堂的价格恶性竞争也让微软最终难以支撑下去。为了仓促上市，而出品了“缩水”产品。
Windows Mobile
对新机会洞见不足，守株待兔式期望用同样手段复制前一个成功
产品历程
2000年4月19日，在Window CE基础上微软开发了针对掌上电脑的Pocket PC 2000操作系统，到2003年它正式以Windows Mobile品牌出现并沿用至今，最近的一个版本为Windows Mobile 6.5，下一代产品预计将在2010年推出。
鲍尔默最近透露，微软这几年在Windows Mobile上的投入不断提高，接近了微软业务开支的4％，平均每年为9亿美元，雇有2000名员工。另一方面，微软在这一领域的市场份额已经从2004年的23％下降到目前的12％左右。
症结
当苹果和谷歌加入智能手机市场争斗时，微软的尴尬显得更为突出。目前诺基亚代表的Symbian阵营牢固掌握着约一半的市场，诺基亚更是在全资控股Symbian后决定免费开放该平台；RIM的黑莓依然拥有自己的优势；苹果2008年凭借iPhone(手机上网)的表现将微软挤到了第四的位置；而谷歌的Android自诞生后就吸引了越来越多的手机厂商和运营商倒戈，其中包括微软的头号支持者HTC。Windows Mobile则一直保持微软的传统，向厂商收取软件使用费。
Windows Mobile对手机触摸技术以及云计算服务方面的感知慢了半拍。同时，Windows Mobile一直拥有大量为其编写程序的开发者，但直到苹果的在线程序商店App Store的出现才让它恍然大悟。微软目前已经启动了一个名为Skymarket的项目，预计将在Window Mobile 7上市时一同推出。
主要竞争对手
Symbian智能手机操作系统/诺基亚
Android 操作系统(G1)/谷歌
Mac OS操作系统(iPhone)/苹果公司
试错法则
在PC领域的优越地位无法复制到手机领域。随着基于操作系统的竞争转变为互联网服务的竞争，微软暴露出对下一个机会洞见不足的问题。
Windows Vista
过于迷恋技术，忽视用户的真正需求。高估自己对用户的影响力
产品历程
2007年1月正式发布的Windows Vista是微软历史上安全性最高的产品，但也是声名最狼藉的操作系统之一。市场研究机构Forrester的调查结果显示，截至2008年6月，全球只有8.8％的企业PC运行Window Vista，而此时距它正式发布已经18个月了。而Windows Vista的上一代产品—Windows XP的用户数已从2001年10月发布时的600万增长至8亿。
2009年4月，Windows XP市场份额仍然高达62.85％，而Vista目前的市场份额仍然只有23.42％。
症结
Windows Vista在研发过程中增加了太多变更和功能，使软件变得庞大而臃肿，导致操作系统运行缓慢。
它还忘记或忽略了最致命的兼容性问题，许多重要的程序和外围设备不能在Vista环境中使用。
主要竞争对手
“Google Apps”：Google在2006年推出其在线办公和应用软件产品。当一些人在Google的“云计算”平台上摆脱了复杂操作系统的束缚，他们对Windows Vista这样徒增麻烦的庞然大物就更难忍受。
Mac OS：苹果“I’m a Mac”系列广告成功地宣传了自己的操作系统，而且还成功地向用户灌输了 Windows Vista漏洞多、消耗资源和易用性差的印象。
试错法则
为了一个用户并不关心的问题而投入重复和无序的研发，最终忽视了用户的真正需求和使用习惯，也忽视了合作伙伴的研发节奏。对软件复杂程度的迷信和崇拜成了这款操作系统最难卸去的包袱。
Hotmail
没有进取心
产品历程
1995年，杰克·史密斯和印度企业家沙比尔·巴蒂亚创立了Hotmail。两年后，在微软的运作下，Hotmail成为全球最大的网络邮件服务提供商。
2007年5月，Windows Live Hotmail上线，但此时它的邮箱容量才仅仅2G。虽然它增加了不少很好的新功能，包括键盘控制—可以在不使用鼠标的情况下实现页面导航、文件夹式邮件整理、联系人分组、以CSV文件导入和导出联系人信息等。可惜，此时的Hotmail已经沦为一个捆绑MSN的帐号。
症结
Hotmail最大的问题之一在于邮箱容量。1995年是1MB，微软收购Hotmail后曾提升至2MB。不过，直到2005年4 月，Gmail已经将容量从1GB提升至2GB，Hotmail容量升至250MB的计划仍未实现。至于2GB微软直到2007年推出Windows Live
