IE8怎么了？
曾经很有冲动把IE升级到IE8.0，想看看可以带来什么样的惊喜，结果装了不够10分钟，马上让我卸载重新装回IE7.0了。感觉很失望，占用了非常大的系统资源，严重的拖慢了我的机子的速度，本来就不快了！而且我的相册看图功能在IE8.0上完全失去了效果，可惜可惜……感觉还是firefox好，用得舒心，用得放心！
| 打印文章 | 这篇文章由xoboy于2008-05-31 23:42发表在Discovery。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |
没有评论
没有引用
再谈IE的hack
大约6月前 - 没有评论
最近频频接触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
补充说明图片垂直居中的问题
大约6月前 - 没有评论
由于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;}
大功告成！
微软的9个试错产品[zz]
大约7月前 - 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
什么是CSS hack
大约11月前 - 没有评论
由于不同的浏览器，比如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 列表图
