地址栏ico图标的显示

on Saturday, April 3rd, 2010 at 11:25 am by 阿辛

本来这点小事不想写的，但是这几天好像特别有更新的欲望。
看下面的代码：

1
2

<link rel="shortcut icon" href="http://xinple.org/wp-content/themes/Xinple/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://xinple.org/wp-content/themes/Xinple/images/favicon.gif" type="image/gif" />

这是我常用的，让浏览器地址栏显示网站ico的代码。下面说一下几个注意点：
1. 尽量使用绝对地址，使用相对地址IE6有可能会显示不出来(之所以说“有可能”是因为我没详细去测试，只是曾经遇到使用href="images/favicon.ico"ico文件相对地址的时候IE显示不出来，后来使用绝对地址就出来了。)

2. 如果favicon.ico直接放在网站根目录下面，可以不写上面的代码浏览器也会自己识别(IE好像不会？该死的IE，好久不用IE了，所以想详细验证的自行去IE尝试，反正我能不用IE就不用，非要用IE也就用IETester测页面和用该死的IE only的网银的时候)(用IE在测试的时候，注意清空缓存)

3. 上面的代码为什么要写两个？那是因为firefox支持gif动画作为地址栏图标。所以IE等不支持gif的浏览器就采用第一条，第二条忽略，firefox的话第二条能识别自然就覆盖了第一条，所以用firefox就看到了动画的图标(注：本博客没有使用gif图标，上面代码仅作演示)

4. ico图片格式一定要准确。昨天好友问我他的网站为什么firefox下面有图标，但是IE下没有。我下了他的ico图片文件用记事本打开一看，原来是个png图片，只不过是把后缀改为了ico，这样的话遇到傻帽IE自然识别不出来，然后用ico转换工具，把图片转换为ico格式的就ok了。

5. 放不放在根目录的问题，这个随个人喜欢，因为我博客用的是wordpress，将来指不准哪天会换皮肤，那么每一套皮肤配一个ico，就放在皮肤文件夹比较好。如果坚持从不修改ico的话，那就放在根目录好了。

2.Web程序开发 | No Comments

去掉邮件头中的mailed-by

on Wednesday, March 31st, 2010 at 6:37 pm by 阿辛

　　今天用mail()函数发邮件，空间是Dreamhost的，发现在gmail中查看详细信息有一个mailed-by: xxx.dreamhost.com(其他邮箱都没显示该邮件头信息)

　　但是在mail()函数的头里面自己定义mailed-by又无效，然后我再换了另外一个空间发送，发现没有这个头信息。说明还是能去掉的。最后找到了如下用法

1

mail($mailto,$subject,$message,$header,'-fexample@xinple.org');

　　注意最后一个参数-fexample@xinple.org，具体介绍可以查看php手册mail函数章节，该参数是可选的，用来添加额外信息的。这里面的example@xinple.org一般是用发送人地址替换，但是我尝试之后发现随便填都行。

　　再次用dreamhost空间发送试试，一切ok。

2.Web程序开发 | No Comments

定位锚平滑滚动jQuery代码

on Monday, February 22nd, 2010 at 3:42 pm by 阿辛

这不是讲究用户体验嘛，所以点击那些“返回顶部”，或者页面内定位锚链接的时候能够平滑滚动页面自然让人比较舒服。下面这个代码记录一下，备用。
注：jQuery代码，需要jQuery库才能运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

加了此段代码之后就能实现平滑滚动了。当然，如果需要像淘宝商品页面那样，在顶部的时候隐藏链接，拉下去的时候就出来的话，可以自行对此代码进行改造。

2.Web程序开发 | No Comments

doctype与Quirks Mode和Standards Mode

on Thursday, January 14th, 2010 at 3:58 pm by 阿辛

自从淘宝新首页出来之后，我看了下它的源代码，一惊，怎么如此简洁？如下：

1
2
3
4
5

<!doctype html> 
<html> 
<head> 
<meta charset="gbk" /> 
<title>淘宝网 - 淘！我喜欢</title>

但一直没时间深入了解，所以自己做页面也都按原来的xhtml strict头写div+css。最近有点按耐不住了，想想还是早点了解可以早点使用，这么简洁看了就舒服啊。

于是去w3cshools查了下，原来这个doctype是html5的，那就奇怪了， IE6/7啥的不是还没支持html5吗？根据我以前的经验，产生了两个困惑：
1. 如果不支持html5的IE在无法识别doctype的时候，会默认使用html 4.0，那么css hack啥的就无法使用了？
2. 如果不支持html5的IE能识别meta标签的charset属性？

通过反复google(题外话:由于谷歌要退出中国，这几天我搜索几乎都用google了)。找到了答案：
1. 曾经我由于没深入了解，所以一直存在误区：我一直以为用html 4.0的doctype就不支持css hack，用xhtml的不管是过渡还是严格版本的doctype就都支持css hack。其实完全理解错了，浏览器支不支持现在流行的css hack是根据Quirks Mode和Standards Mode来进行渲染的。所以如果是Quirks Mode就不支持css hack了，如果是Standards Mode就支持。

目前浏览器是这样判断的，如果没任何doctype申明，那么就是Quirks Mode
如果是strict dtd不管是html还是xhtml都是Standards Mode
而我以前产生误区的原因是那时候用editplus新建html文件有模板，而自带的模板doctype申明是html Transitional，这个是Quirks Mode所以导致我以为html的doctype就不支持了。

这回清晰了，再看yahoo.com，用的是html4 strict，淘宝用的是html5的，都是Standards Mode，都能css hack了，兼容浏览器还有什么担心的吗？

2.不支持html5的IE能识别meta的html5新属性charset。原因不明。

2.Web程序开发 | No Comments

禁止input输入框默认的自动提示

on Wednesday, February 18th, 2009 at 4:21 pm by 阿辛

一般浏览器都有自动完成功能，就是输入过一次的表单，下次输入的时候会提示以前输入过的内容，这个东西有好处，但有时候又不需要：比如现在google.cn/迅雷狗狗/verycd等等搜索框都加入了自己制作的智能的输入提示，那么就不需要浏览器自己的输入提示了。

要去掉很简单，使用autocomplete属性如下：

<input title="http://xinple.org" name="demo" type="text" />
2.Web程序开发 | 1 Comment

CSS Hack

on Thursday, February 12th, 2009 at 2:04 pm by 阿辛 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

#demo {
    color:red; /*All*/
    color:red\9;/*All IE*/
    color:red\0;/*IE8 only*/
    +color:blue; /*IE6, IE7 还能用 * 或者 # */
    _color:green; /*IE 6*/
    [;background-color: green;] /*safari, chrome*/
}
 
* html #demo { /*IE 6 and below*/ }
 
*+html #demo { /*IE 7, IE 8 beta*/ }
 
@media all and (min-width:0px){
    #demo { /*Opera*/ }
}
 
/*\*//*/
#demo { /*IE 8 beta*/ }
/**/
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #demo {/* 针对Chrome、Safari 3.0、Opera 9 的CSS样式 */}
} 
 
body:nth-of-type(1) #demo {
   /*Chrome &amp; Safari 3.1*/
}
 
.className, x:-moz-any-link { /*FireFox 2 */ } 
 
.className, x:-moz-any-link, x:default { /*FireFox 3*/ }
 
html>/**/body .foo, x:-moz-any-link, x:default { /* Only FireFox 3 */ }

另外还有通过IE的条件注释方式进行hack，全文见：
http://www.javascriptkit.com/dhtmltutors/csshacks.shtml

2.Web程序开发 | 3 Comments