Bolo的博客 » Browser

IE9 发布

bolo — Tue, 15 Mar 2011 08:55:49 +0000

如果你不知道你正在用的浏览器有多糟糕，阅读前请先点击（这个页面标）。如果你看到的不是下图，那么，请下载 IE9 吧。我不敢拿自己的蛋担保 IE9 有多好，但至少比你现在用的浏览器要好。

CSS：跨浏览器复合背景

bolo — Wed, 28 Apr 2010 05:15:21 +0000

最近发现了一个让 IE6~8 也能呈现 CSS3 Multiple Backgrounds（复合背景）的方法，当时我小小的震惊了一下。看来 IE6 曾经的辉煌不单是微软的捆绑和网银的支持造成的，在当年，它强大的功能也令其它浏览器难以追赶。废话不说了，先说说 CSS3 里的标准做法。

在 CSS3 标准里，Background 属性被赋予更加强大的功能，在 CSS2.1 的基础上，我们可以对一个对象同时使用多个背景图片。例如如下的样式：

1
2
3

#multiple-bg {
	background-image: url(top.png), url(middle.png), url(bottom.png);
}

添加符合背景图片的时候先从最顶层开始添加，按从高到低的顺序写样式。大家可以看这个 Demo。可以尝试用 IE 打开看看效果。

用 IE 打开过 Demo 的同学可以发现 IE 也能显示复合背景了，如果你查看过 DEMO 的源码，你可以发现我是通过 IE 滤镜来实现的。方法是先用标准的 CSS 加一个底层的背景，再通过滤镜添加上一层的背景。整个 Demo 的样式如下：

IE 的不足

看到当年 IE 的强大了吧？最早开始支持复合背景的 Safari 3.1 诞生以前，IE6 早就可以通过滤镜制作出这种效果了。但IE也存在明显的不足：

本例使用的滤镜没有提供调整图片位置的参数，至少我在 MSDN 的技术文档里没找到。
目前 IE 只能制作出两层复合背景。

本文权当开开眼界了，为了更快地拥抱 CSS3 ，请在不使用网银和支付宝时弃用 IE。

Firefox Input Button Line-Height Bug

bolo — Mon, 01 Mar 2010 07:33:56 +0000

最近国外有开发者发现Firefox和Opera的一个BUG：无法改变按钮里文字的行高（包括input type=”sumbit”和HTML的button标签）。举个例子，对一个按钮使用以下样式：

input#button {
	border: 2px solid #06f;
	color: #06f;
	background-color: #6cf;
	font: bold 12px Arial, Helvetica, sans-serif;
	line-height: 50px;
}

按照常理，这个样式将为按钮设置50px的行高，并使文本垂直居中。因为这个样式在Chrome、Safari和IE8里的表现都一致，唯独在Firefox和Opera里并没有表现出50px的行高，具体效果如下图。

是什么原因引起了这个问题？

在Firebug的帮助下，该开发人员发现虽然自己已经把行高设为50px，但Firefox依然使用15px的行高。

该开发人员认为是Firefox强行限制了按钮文本的行高，于是编写了以下的CSS用于验证。

1
2
3

ibutton, input[type="reset"], input[type="button"], input[type="submit"] {
	line-height:normal !important;
}

该开发人员发现，Firefox会私自把按钮内文本的行高设置为normal，这个值在Firefox里默认为15px，但各个浏览器对normal的值并没有一个统一的标准。最后这个开发人员放弃了通过行高把按钮撑开并使文本居中的方法，而采用了以下的样式，解决了Firefox的按钮行高问题。

input#button {
	border: 2px solid #06f;
	color: #06f;
	background-color: #6cf;
	font: bold 12px Arial, Helvetica, sans-serif;
	padding: 18px 6px;
}

这并不是最好的办法，但也算是达到了所需的效果。

本文案例出自The Firefox Input Button Line-Height Bug

后记

我认为这个开发人员似乎并没有考虑到令一个CSS属性，而是抱着“完成了就好”的心态去解决问题。你认为这个所谓的BUG有更好的办法解决吗？欢迎讨论一下。

IE测试工具：Web 3 SuperPreview

bolo — Thu, 25 Feb 2010 05:31:55 +0000

Microsoft Expression Web 3 SuperPreview是微软公司为WEB开发人员推出的一个用来测试网站效果的软件，免费版可以用来测试IE6+的页面效果，并且可试用60天。这对一般的网页设计人员来说已经足够了。特别在升级到Win7以后，老牌测试工具IETester经常报错，令人非常郁闷。微软自家的Web 3 SuperPreview就不会犯这种低级错误了，而且它的功能比IETester强大多了。我以我的日记博客（http://shouy.in）为测试对象演示一下几个好用的功能。

精确的元素尺寸和坐标

和一般测试工具不同，Web 3 SuperPreview会把整个页面按HTML标记分成一块一块的，点击以后会显示该元素的大小和在屏幕上的坐标。一像素的误差都可以通过数字直接比较出来，这个精度是目测难以达到的。从这张图片可以看出，文章标题的高度有3px的误差，看来我要修改一下文章标题的样式了。

标尺功能

在同一个页面里比较box之间的相对位置，Bolo的常用方法是随便打开一个新窗口，用这个新窗口去量。可是这个土办法的缺点是非常明显的，想精确地比较出差别也比较难，Web 3 SuperPreview带有非常好用的标尺功能，而且可以实现跨浏览器的直接对比。

覆盖视图

有时一个个元素地进行比较是非常麻烦的，浪费的时间也多，Web 3 SuperPreview有个OverlayLayout（覆盖布局）的功能，一下子就可以比较出整个页面的差别。

强大的扩展性

以上只是Web 3 SuperPreview免费版的基本功能，更多的功能还需要大家去挖掘。另外也可以购买正式版，获得更多令人垂涎的功能，如：

支持更多浏览器，如Safari等
支持ASP.net，PHP程序的调试
支持脚本的调试&more

更多请浏览Microsoft Expression Web 3 SuperPreview官方网站，下载页面。

Oprea的怪异识别码

bolo — Tue, 17 Nov 2009 06:00:16 +0000

我打算重新设计一个博客引导页，在里面设计一个小彩蛋。通过PHP识别访客所用的浏览器，并输出不同的欢迎语。省时起见，在网上搜索了一段代码：

if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 8.0"))
echo "MSIE 8";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 7.0"))
echo "MSIE 7";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 6.0"))
echo "MSIE 6";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Firefox/3"))
echo "Firefox 3";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Firefox/2"))
echo "Firefox 2";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Chrome"))
echo "Google Chrome";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Safari"))
echo "Safari";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Opera"))
echo "Opera";
else echo $_SERVER["HTTP_USER_AGENT"];

这段代码的意思是根据浏览器识别码来控制输出的内容，在IE、Firefox，甚至Oprea9里都测试正常，可是用Opera10测试时却返回了Opera/9.80 (Windows NT 5.1; U; zh-cn) Presto/2.2.15 Version/10.00也就是浏览器的原始识别码(其实这段代码可以在Opera地址栏里输入“opera:about”看到)。换句话说，上面那段程序不能正确检测出Opera10。
Opera10有个很奇怪的地方，大家留意一下返回的代码，会发现Opera是9.80，但Version却是10.00。
这里面有个小故事：

Opera 的工程师在测试中发现，Opera 10 Alpha 在很多老网站上的运作很不正常。原来，有很多网站使用了“浏览器嗅探”技术，也就是说网站会针对不同的浏览器提供不同的内容或功能。然而不幸的是，这些网站无法识别两位数的浏览器版本号，于是 Opera 就成了首当其冲的受害者——它们把 Opera 10.0 误认为是 Opera 1.0，并因此向 Opera 10 提供不完整的功能，甚至有些网站干脆拒绝 Opera 10 的访问。
这当然是 Opera 不愿意看到的。于是，Opera 的工程师们决定，将用户代理信息中的版本号定格在 9.8，并另外启用 Version 字段来标识真正的版本号。当然他们也考虑过选用 9.99 这个最接近 10 的可用作版本号的数字，不过出于预留空间的考虑，最终还是决定采用 9.8 作为象征性的版本号——它正好介于（Opera 9 的最后一个版本号）9.6 与 10 之间。

于是我开始修改程序，却发现用Opera/9.80也无法识别出Opera10.
经过几次修改和测试，我最后采用了以下方法识别Opera10。

1 2	else if(strpos($_SERVER["HTTP_USER_AGENT"],"Version/10.00")) echo "Opera 10";

可是这个方法有一个极大的弊端，就是Opera10升级到10.XX就不能使用了。谁能告诉我在PHP里，应该怎么识别Opera10呢？

情从马桶中来

bolo — Fri, 31 Jul 2009 11:41:26 +0000

最近傲游论坛搞一个设计板块图标得官方T恤的活动，我忍不住参加了。我的作品请看图“活动专区”的图标。
看来真是我太久没做过图标，作品出炉的时候从上下左右各个方向欣赏了效果，态度相当自恋，自以为应该是拿奖品的水准了，因此迫不及待地上传到论坛。
昨天晚上再次登录论坛查看观众反映，见一评分者，留言曰：“这个……像厕所”。本人当时有点佩服该评论者的想象力真是天马行空（插播旁白：真是一个囧啊，我当时居然真的还没发现这个logo像世界流行的WC标志）。后来我控制不了自恋的情绪，再次欣赏了一次logo。说来有点后悔，这次自恋的第一感觉是：厕所在此。我马上停下正在赶工的主题，做了一个新logo并上传到论坛。

现总结一下这次设计的心得，望能令前辈一笑和后来之人引以为戒。
1、宁愿恋春哥，也不要恋自己弄出来的东西。
2、提交作品的时候一定要带上说明，否则容易引起误会。

后记：
今天在新设计的logo和旧的之间做了一下比较，忽然想起，傲游不是有个小名叫马桶吗？用户对傲游的一切感情从马桶中来，既然是活动专区，我用厕所的标志来隐喻桶香不怕厕所深的傲游应该没有什么大问题吧？

算了，把解释权留给观众。

尝尝新吧，3D立体网页浏览器！

bolo — Wed, 01 Jul 2009 08:39:00 +0000

厌倦了呆板的桌面了吗？厌倦了平淡的网页了吗？试试SphereXPlorer吧！
SphereXPlorer 是一款3D网页浏览器，SphereXPlorer网页浏览器提供独一无二的网页浏览方式，可以让使用者快速寻找、组织、存储和交换所需的网络资源。
SphereXPlorer三维立体网页浏览器，使得你浏览网络时与以前大不相同，有着新奇的临场感，让使用者同时浏览多个网页，这一切尽在SphereXPlorer三维立体浏览器中实现。
追求操作的万变、新鲜刺激的应用体验总是能激起大家无尽的兴致。
打开SphereXPlorer，在地址栏中输入要浏览网页的地址，这时我们可以看到在三维浏览器的主界面中就会打开你要浏览的网页了。当鼠标激活网页面板，按住键盘上的Ctrl键，然后拖动鼠标这时可以上、下、左、右旋转网页，实现三维立体网页浏览效果；或直接单击页面上的“紫色圆圈”按钮不放，然后拖动鼠标即可实现旋转效果。当没有激活网页面板时候，按住键盘上的Ctrl键拖动鼠标的时候，这时我们可以发现整个画面都在移动，其实网页是不动的，只是整个浏览场景在移动。当用户按住“绿色上下箭头”按钮不放，然后前、后拖动鼠标的时候，可以放大或缩小浏览的页面。用户可以同时浏览多个网页，单击主界面上方的 “+”按钮，此时浏览器界面中多出一个一样的网页，然后在地址栏中输入新的浏览地址即可。如果我们想要移动网页也非常的简单，单击网页的标题栏不放，然后拖动鼠标移动即可，放在合适的位置时候松开鼠标即可。当用户直接在浏览器单击任意一个浏览新窗口的时候，它将自动打开一个二维的浏览窗口，该窗口脱离了SphereXPlorer三维浏览器；如果它是直接连接过去而不是打开一个新的窗口的话，那么它会直接改变浏览内容。用户可以通过三维浏览器界面上方的三个按钮，来控制后退、前进、刷新网页。单击鼠标右键，在打开的下拉列表中选择第一个或第二个选项，可以快速指定一种窗口显示状态。用户还可以自定义三维浏览器的背景，单击鼠标右键，在弹出的菜单中选择最后一项，在打开的窗口中选择背景图片，然后单击“OK”按钮即可切换背景。用户还可以改变选中后网页的标题栏，在背景选择下方，选择你要设置的颜色即可。
这款浏览器使用ie内核，虽然功能相当简单，锯齿现象也相当严重，但的确非常有创意！而且是一个免费软件哦！

官方下载：http://www.spheresite.com/downloads.html

IE6、IE7、Firefox之间的兼容写法

bolo — Wed, 10 Jun 2009 09:16:07 +0000

因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

1、 IE6、IE7、Firefox之间的兼容写法：

写法一：

IE都能识别*;标准浏览器(如FF)不能识别*； 
IE6能识别*，但不能识别 !important, 
IE7能识别*，也能识别!important; 
FF不能识别*，但能识别!important; 
根据上述表达，同一类/ID下的CSS hack可写为： 
.searchInput { 
background-color:#333;/*三者皆可*/ 
*background-color:#666 !important; /*仅IE7*/ 
*background-color:#999; /*仅IE6及IE6以下*/ 
} 
一般三者的书写顺序为：FF、IE7、IE6。

写法二：

IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写： 
.searchInput { 
background-color:#333;/*通用*/ 
_background-color:#666;/*仅IE6可识别*/ 
}

写法三：

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。 
.searchInput {background-color:#333;} 
*html .searchInput {background-color:#666;}/*仅IE6*/ 
*+html .searchInput {background-color:#555;}/*仅IE7*/ 
 
屏蔽IE浏览器： 
 
select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。 
 
*:lang(zh) select {font:12px !important;} /*FF的专用*/ 
select:empty {font:12px !important;} /*safari可见*/ 
 
IE6可识别： 
 
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。 
 
select { display /*IE6不识别*/:none;}

IE的if条件hack写法：

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

本文转载自：http://blog.admin9.com/?p=988