Hpyer 的未知空间 » IE http://hpyer.cn 现实的世界里寻找点滴的未知空间 Wed, 01 Feb 2012 02:16:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 IE6、IE7、IE8、Firefox、Chrome 等浏览器兼容的CSS hack http://hpyer.cn/css-hack-for-ie6-ie7-ie8-firefox-chrome.html http://hpyer.cn/css-hack-for-ie6-ie7-ie8-firefox-chrome.html#comments Fri, 22 Jul 2011 09:08:02 +0000 Hpyer http://hpyer.cn/?p=729 最近做了比较多的网页前端开发，对于CSS的兼容问题比较头大，不过幸好，有个叫CSS Hack的东西，有些问题只要做一些针对性的设置，问题就可以解决了。那么，什么事CSS Hack呢？

由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

各浏览器CSS hack兼容表：

  IE6 IE7 IE8 Firefox Chrome
!important   Y Y Y Y
_ Y        
* Y Y      
+   Y      
\9     Y    

代码示例：

#test{
    color:red; /* 所有浏览器都支持 */
    color:red !important;/* Firefox、IE7、IE8支持 */
    color:red\9; /* IE8支持 */
    *color:red; /* IE6、IE7支持 */
    +color:red; /* IE7支持 */
    _color:red; /* IE6支持 */
}
]]> http://hpyer.cn/css-hack-for-ie6-ie7-ie8-firefox-chrome.html/feed 0 IE6/7 inline-block实现及分析 http://hpyer.cn/solution-of-inline-block-in-ie6-and-ie7.html http://hpyer.cn/solution-of-inline-block-in-ie6-and-ie7.html#comments Fri, 03 Jun 2011 14:44:25 +0000 Hpyer http://hpyer.cn/?p=722 ie6，ie7的haslayout属性是个让人头疼的问题。在做导航条的时候，一般会用到ul li结构，大多数时候我们是把li设置为浮动，让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上下padding的，但是在标准浏览器里面是可以设置上下padding的）。

鉴于inline元素的这种特性，如果我们不浮动并且想让li显示在一行，而且可以设置高度，宽度以及上下margin，上下padding等属性，应该怎么办呢？你一定会想到一个属性display:inline-block; 对！”inline-block”就是干这个事的，让一个元素既不换行又具有block元素的特性。不过有点小问题，让我们看代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>display-block</title>
<style>
ul {background:#ccc;padding:0;margin:0;list-style:none;}
li {display:inline-block;
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;}
</style>
</head>
<body>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
</body>
</html>

上面的例子，在firefox，opera等标准浏览器里面已经达到效果了，但是在ie6和ie7下却发现每个li元素仍然独占一行，（关于margin合并的问题日后再说）。这是因为ie6和ie7并不完全支持inline-block这个属性值。通过上面的例子会发现加不加display:inline-block;对于它们完全没有任何影响。

那么让我们来想办法解决这个问题，这就涉及到ie6，7中的haslayout属性了。ie6，7中的inline元素有个特殊的情况，就是触发了ie的hasLayout属性以后就拥有了layout。此时inline元素的表现和标准浏览器里面的inline-block元素基本相同。看下面这个例子，我们用ie的私有属性zoom来触发hasLayout，然后看看inline元素的表现。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>display-block</title>
<style>
span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;zoom:1;}
</style>
</head>
<body>
<span>span</span>
</body>
</html>

可以看到在ie6，7中inline元素span已经表现得和一个display:inline-block元素一摸一样了，但是在标准浏览器中span仍然是行内元素（宽高以及上下margin都无效）。

如果声明了不正确DTD，导致ie6在quirks 模式下解析，那么ie6会自动触发inline元素的haslayout，不过这里只讨论正常情况下的解析，所以加了个zoom:1来触发haslayout;zoom的值设置为除了auto外的任何值都会触发haslayout，之所以经常用zoom:1;是因为zoom这个属性本身是ie的缩放属性，设置为其他值会导致元素在ie下变形，设置为1既是保持原形不缩放。

了解了上面的情况，我们就可以来解决之前那个问题了。可以改原先的css代码如下：

li {display:inline-block;    /* firefox等标准浏览器识别*/
*display:inline;      /* 只有ie6和ie7识别*/
zoom:1;               /* 触发ie6和ie7下的haslayout */
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;
}

让标准浏览器识别display:inline-block;让ie6，7识别display:inline;来覆盖上面的display:inline-block;（我为什么要说”覆盖”？）。然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>display-block</title>
<style>
ul {background:#ccc;padding:0;margin:0;list-style:none;}
li {display:inline-block;
*display:inline;
zoom:1;
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;
}
</style>
</head>
<body>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
</body>
</html>

可以看到，现在在各浏览器里面的显示已经一致了。li元素都显示在同一行。

不过我上面问了：为什么要说覆盖？

假如我们把上面的css代码中的

display:inline-block;
*display:inline;

两句调换一下顺序会怎样？你会发现display:inline-block;覆盖了*display:inline;导致在ie6，7中原先的样式又失效了，这说明什么？说明ie6和ie7是认识display:inline-block的，所以我在前面说”不完全支持”而没有说”完全不支持”，嘿嘿，我可没有打自己嘴巴。之所以说”不完全支持”是因为还是有一点作用，虽然display:inline-block对ie6，7中的元素表现没有任何直接影响，但是它会触发inline元素的haslayout。只有这一个作用，让我们再回到前面的例子：

span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;
display:inline-block;}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>display-block</title>
<style>
span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;display:inline-block;}
</style>
</head>
<body>
<span>span</span>
</body>
</html>

可以看到，我们把zoom:1换成了display:inline-block以后，在ie6，7中span仍然和firefox等标准浏览器下一样，具有了设置的宽高和上下margin，上下padding。它表现得和display:inline-block同学一样好，不过这并不是因为display:inline-block这条声明直接生效了，而是因为display:inline-block触发了ie的haslayout属性，使得inline元素具有了inline-block的表现。

原文地址：http://www.k68.org/?p=495

]]> http://hpyer.cn/solution-of-inline-block-in-ie6-and-ie7.html/feed 0 Windows 7最新测试版可禁用IE浏览器 http://hpyer.cn/ie-can-be-disabled-in-the-latest-beta-version-of-windows-7.html http://hpyer.cn/ie-can-be-disabled-in-the-latest-beta-version-of-windows-7.html#comments Thu, 05 Mar 2009 03:28:34 +0000 Hpyer http://hpyer.cn/?p=574

　　新浪科技讯 北京时间3月5日上午消息，据国外媒体报道，一位Windows 7测试人员表示，在Windows 7最新测试版中，微软允许用户禁用Windows自带的IE浏览器。这是Windows与IE自1997年捆绑以来微软首次提供禁用IE选项。

　　在该Windows 7测试版中，微软在“启用或禁用Windows组件功能”对话框中添加了“IE浏览器”选项，这意味着用户可以禁用IE浏览器。微软此举可能是出于对欧盟 “异议声明”的顾虑。欧盟于1月16日向微软发出“异议声明”，指责微软将IE与Windows捆绑销售违反了欧盟反垄断法，阻碍了其它浏览器的发展。

　　目前尚不清楚Windows 7正式版是否保留该禁用IE浏览器的选项。不过如果微软在应对欧盟“异议声明”中取得胜利，该选项很可能不会被保留。

]]> http://hpyer.cn/ie-can-be-disabled-in-the-latest-beta-version-of-windows-7.html/feed 0 火狐市场份额超20% http://hpyer.cn/the-market-share-of-firefox-exceeds-20-percent.html http://hpyer.cn/the-market-share-of-firefox-exceeds-20-percent.html#comments Wed, 03 Dec 2008 11:22:06 +0000 Hpyer http://hpyer.cn/?p=429 　　北京时间12月3日消息，据国外媒体报道，美国互联网分析公司Net Applications周二表示，今年以来，火狐(Firefox)在浏览器市场的份额一直在稳步增长，目前已超过20%；IE市场份额则已经跌破70%。
　　Net Applications称，截至11月底，火狐市场份额为20.78%，IE为69.77%。火狐市场份额一直在稳步增长，1月份时为16.98%；IE市场份额则一直在下滑，年初时为75.47%。

　　附：本站近三十天的统计信息（数据来源：雅虎统计）

　　因为本人都是使用Firefox 3在访问，所以这一项可以不做考虑。但即便这样，IE（包括IE6、IE7、Maxthon、MyIE）的占有率也只有68.993％。可见，如今已经有越来越多的用户开始接受并使用非IE内核的浏览器了。

]]> http://hpyer.cn/the-market-share-of-firefox-exceeds-20-percent.html/feed 2 微软IE8新功能对谷歌广告模式造成威胁 http://hpyer.cn/the-new-function-of-microsoft-ie8-will-threaten-google-advertising-mode.html http://hpyer.cn/the-new-function-of-microsoft-ie8-will-threaten-google-advertising-mode.html#comments Thu, 28 Aug 2008 11:15:02 +0000 Hpyer http://hpyer.cn/?p=109 　　由于空间目前暂是免费的，时而会有这样那样的问题存在，因此，也正有改变空间模式，以获取一点收入来购买性能相对更加稳定的空间的想法。如今的个人网站，多数是靠投放广告，以换取微薄的收入，但是，貌似这一模式很可能将要改变…

　　新浪科技讯 北京时间8月28日消息，据国外媒体报道，微软IE8的隐私权新特性可能对谷歌等网络搜索竞争者的广告模式造成威胁。
　　IE8用户将可选择隐藏个人信息秘密登陆网站，这将令利用用户信息以个人为目标定位广告的搜索引擎受损。这一名为“InPrivate Browsing(私人浏览)”的新功能作用是，当用户关闭浏览窗口后，IE不会存储任何Cookies、密码、网页地址、搜索查询、Internet临时文件或数据，因此被一些科技博客称为“色情模式”。
　　但微软指出，InPrivate将在生日礼物购买或疾病医疗搜索等领域为其客户带来利益。微软英国公司Windows事业部经理翰·卡兰(John Curran)称：“有些人会喜欢一直‘私人浏览’，但总有人会权衡取舍是否采用这种模式。”
　　在微软通过IE等服务搜集个人信息的数量问题上，用户一直表示强烈抗议。分析与研究公司Ovum的IT分析师大卫·米切尔(David Mitchell)称：“如果更多人相信围绕隐私权新功能的大肆宣传，则选择‘私人浏览’模式的用户将会增加，对‘点进’广告造成潜在威胁。”
　　微软周三发布了功能完备的升级版IE8 Beta 2，但并未透露将于何时正式推出IE8。Beta 2具有火狐浏览器的一些特性，如“Visual Search(视觉搜索)”等。微软否认曾从竞争对手的产品中复制某些功能。
　　据网络咨询及应用提供商Net Applications数据显示，微软IE全球市场份额为73%，火狐为19%。

]]> http://hpyer.cn/the-new-function-of-microsoft-ie8-will-threaten-google-advertising-mode.html/feed 1