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 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在 HTML 中，CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack，具体就是：

>body
html*
*+html

这三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。
IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.
IE的if条件Hack

<!–[if IE]> Only IE <![endif]–>
所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–>
仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>
仅IE7可识别

首先我们定义一个放置图片的容器

.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;}

大功告成！

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 Hotmail之后才赶上这个数值—难道微软这家大公司就那么缺钱来买硬盘吗？

主要竞争对手

Gmail及各类电子邮件服务系统

试错法则

当Gmail 开始让用户体验到显而易见的新变化—哪怕不断出错—Hotmail却依然固守闭门研究的传统，不问问用户需要什么。Windows Live Hotmail测试就用掉了漫长的两年，最终发布的版本却并未让人眼前一亮，这已足够让人失望。在互联网时代，服务变得免费，用户们却似乎不再忠诚了，而且要知道，没人愿意总是使用落后的技术。

平板电脑

太超前的技术，没有足以引爆流行的产品—归根结底还是服务缺乏指向

产品历程

比尔·盖茨关于平板电脑(Tablet PC)的梦想已经成为泡影—2002年他曾预言10年内这种带触摸屏、手写输入功能、无键盘、方便随身携带的电脑将取代传统笔记本的位置。现实却完全不是这样。

1989年第一台平板电脑问世，IBM最初的ThinkPad原型也属于这一类别，但它们谁也没有取得成功。1992年，微软开发了Windows for Pen Computing操作系统，不久也演变为一次失败的经验。

2002年微软卷土重来大力推广Windows XP Tablet PC Edition时，平板电脑迎来了自己最好的时光—但只持续了半年时间。2006年平板电脑出货量约为100万台，IDC曾预测2010年这个数字会达到 400万，但这大概只会占笔记本总体的2％，离盖茨的理想简直太遥远了。

症结

平板电脑并未引爆流行，最终只是在教育、医疗、政府机构等特殊行业中应用。

IBM、戴尔和索尼等厂商从开始就对这款产品是否有价值存有怀疑。支持者惠普、宏碁、东芝们也随后发现，微软不仅并不愿在操作系统授权费上作出让步，对一些平板电脑应用功能的开发也并不积极。

主要竞争对手

Linux操作系统

苹果公司即将推出的平板电脑产品：苹果代号雪豹的操作系统是有史以来最亲近触摸技术的，其推出的平板电脑引人注目。

试错法则

触摸屏、手写识别技术、便携—这些今天都已被验证为是具有出色前瞻性的需求，但不幸的是，微软在错误的时间和错误的产品上考验了市场。高价格和并不恰到好处的卖点成为这款产品进入大众市场的障碍。

Media Player

产品好很重要，用户也很重要，但还要找到有力量的合作伙伴

产品历程

Windows Media Player是微软自推出16位操作系统之后，就一直捆绑其中的多媒体播放机。在最新的几个版本中，已经发展成为一个完整的音乐管理软件，并加强了用户在互联网上的使用体验。它可以播放多种流行的文件类型，如：WMV、WMA、ASF、MP3、WAV、AVI、MPEG-1、MPEG-2、MIDI等，安装插件后还可以支持QuickTime电影文件以及网上较流行的RMVB视频文件。

症结

微软这一次敏感地注意到“内容”是吸引互联网用户的最佳手段之一，并希望借此推广微软自己的影音格式标准(主要是WMV)。不过，这家以操作系统起家的公司，显然缺乏苹果一样对时尚娱乐潮流的把握，也缺乏与非IT公司合作的能力，结果它没能像苹果网上音乐商店那样后来居上，被各大数字音乐内容提供商视为必不可少的销售平台。

主要竞争对手

iTunes/苹果公司

到2007年底，苹果已经控制了73.7％的零售数字音乐市场，销售了30多万首歌曲。另外，把线上线下都算上，iTunes也成为美国除百思买和沃尔玛之外的第三大音乐零售商。

Realplayer/RealNetWorks公司

试错法则

没有进行恰当的市场营销，忽视了产业生态链的建立。如果从一开始，微软就加紧推动与各大唱片公司的合作，以微软的影响力和资金规模，苹果iTunes还会拥有现在这样的地位吗？答案是很难说。

.NET

技术不是目的，保守或给自己的技术设置准入门槛，最终损失了用户

产品历程

2002年3月，微软将.NET Framework推向市场，试图在互联网领域维系自己的霸业—就像它们在PC市场上所做到的一样。本质上，NET Framework是一种嵌入式的底层技术平台，它的最初目的，是为身处信息时代的各类用户、厂商提供可以进行无缝连接的软件产品和服务。在微软的设想中，电子商务公司、银行、信用卡公司、电信公司，以至互联网服务提供商、电子游戏开发商等，均可利用.net建立新的营业模式，为用户提供互联增值服务。但到了2009年5月，微软开始将这一架构的源代码交由那些接手的互联网社区进行后续开发，它消失在了微软的企业级产品线中。

症结

Java普及的最重要原因在于其“开放性”，它可在各种系统上运行，由此带动更多开发商提供越来越多的新产品和新应用。反观.NET Framework，却只能在基于微软自己的系统上运行。现在微软似乎已经开始意识到这一点。另一方面，微软也一直缺乏具体可执行的、用以“拉拢”产业链上下游的计划。

主要竞争对手

Java

IBM WorkPlace

试错法则

不明白社会、时代变迁中的用户所需要的“开放性”。微软注意到了在互联网时代提供服务的重要性，但它过高估计了在“开放”成风的互联网领域，人们对于微软的依赖性。即使在2007年10月，微软宣布将.NET“开放源码”之后也是如此：声称源码“不许自由修改、不许自由传播”等等。

Wallop

盈利模式当然是重要的，但过早商业化可能损失的是发展做大的机会

产品历程

在Facebook、MySpace横空出世的几年前，微软已经开始了对社交网络的研发。2004年11月，在微软研究院诞生的Wallop开始小规模测试，2006年4月，Wallop被微软分拆，成立的新公司得到两轮1300万美元风险投资的支持，微软占有股份，硅谷创业人士Karl Jacob担任CEO。2008年9月，仍处在测试阶段的Wallop结束了自己作为SNS的身份，网站被关闭。目前，Wallop是为 Facebook、Bebo等著名社交网站开发应用程序的公司。

症结

Wallop是一种颠覆性的尝试。首先，其全新Flash风格显得相当华丽而特别，它从一开始就坚定地认为“朋友邀请”是其发展用户的正确方式。同MySpace不同的是，Wallop拒绝将广告作为收入来源。网站以0.99到4.00美元的价格出售Flash动画、图片、游戏等，用户用它们来打造自己的个人网页。

主要竞争对手

Facebook和MySpace是社交网站领域的两大巨头，前者今年的注册用户数目已经超越2亿。

试错法则

Wallop大概把用户都看作了热爱美化自己“界面”的程序员，而忽略了对“2.0”来说真正重要的是用户互动。

IE6 & IE7

捆绑成就了IE，但靠“搭售”这种模式可能会让一个产品丧失主动性

产品历程

在IE6和IE7大行其道的2001至2008年，微软IE浏览器的市场份额已从90％急遽跌落了二十多个百分点。2009年4月，IE浏览器的市场份额从3月份的66.82％下降到了66.1％，创下历史新低，而Firefox浏览器市场份额升至22.48％。分析人士甚至预测：2011年微软IE浏览器的市场份额将跌至50％以下。

症结

在IE6的地位尚未被撼动的时候，人们对网页浏览器的需求已经发生了变化：在线分享和播放视频、在线交友、电子商务以及网络上的互动日渐风靡。 2004年崛起的Firefox抓住了微软打盹的机会。微软意识到Firefox的挑战之后迅速地宣判了IE6的死刑—但IE7仍未能解决一直困扰微软的兼容性和开放性问题。

主要竞争对手

Firefox：Mozilla基金会创建。2004年正式发布，此后5年之内蚕食了微软IE将近20％的市场份额。

Safari：苹果的浏览器，一直维持8％左右的市场份额。

Opera：市场份额不到1％，主要在手机浏览器领域。

Chrome：Google在2008年9月发布的浏览器产品，目前市场份额为1.5％。

试错法则

与操作系统的捆绑并不能保证IE在浏览器市场一劳永逸的地位。对互联网趋势的麻木与漠视使微软越来越难守住人们通往互联网世界的入口。而它在兼容性和开放性等问题上的迟缓反应也再次证明了软件行业的思维方式并不能适用于互联网。

这个时候我们就需要针对不同的浏览器去写不同的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和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox

div{: background:orange;  
*background:green;  
_background:blue;}
div{: background:orange;
*background:green;
_background:blue;}

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面

付:CSS hack 列表图