其他的细节差别
当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。

其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

<div id="parent">
<div id="content"> </div>
</div>

当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

在层的最下方产生一个高度为1的空格，可解除这个问题

五、随机的切换图片：
#random {
BACKGROUND: url(/rotate.php);
}
这个方法很巧妙。

关于div的高度自适应
　　今天小尿让我帮他的页子解决一个问题，就是div的高度自适应，也就是在一个父级div中嵌套一左一右两个子div，右边的子div内容可无限扩展，而可以使得父级div的高度能被无限拉长，用一般的布局方法，在IE中可以正确浏览，在Mozilla中父级div的高度就固定在10px左右，无法自适应高度，height:auto也不行，怎么办呢。网上参考到一篇资料，要实现自适应高度，div层必须具有float属性，于是我开始动手试验，float:left的话，div就跑到页面最左边去了，这好办，我在它的外面再套一层div，把位置定好，那么里面的就算float:left也不会被移动位置了。

<div id="container_father">
<div id="container">
    <div id="panel"> test<br />
     test<br />
     test<br />
      <!-- id="panel" -->
    </div>
    <div id="sidebar">
     <ul>
       <li class="current">预安装检查</li>
       <li>阅读 PFC 授权协议</li>
       <li>初始化数据库</li>
       <li>完成安装</li>
      </ul>
      <!-- id="sidebar" -->
    </div>
    <!-- id="container" -->
</div>
</div>

#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
   width: 750px;
   border: 1px solid #cccccc;
   padding: 8px;
   margin: 0px;
   background-color: #F1F3F5;
   float: left;
}

深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
什么发生故障？
一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

情况应该如何？

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

陈旧的IE“双倍占据”
原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。
这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

修复办法！

直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？

研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的”inline”声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。就如Steve从W3C里指出：

9.5.1 Positioning the float: the ‘float’ property

“This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate
boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top
(subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. ”

这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了”inline”修复。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

纯CSS 弹出式菜单效果:

现在我想说说关于Dark皮的一些特性，不过目前我并没有发布她，也不知道会不会发布，他可以称的上是Reborn的优化与升级，改名好像不太适合，呵呵不过对于一个皮制作者来说，这样可以记录他的成长，至少我是这样想的。
Dark 首先是自适应分辨率的，这是我一直以来的心病，因为CSS在IE6会表现的很异常，所以一直没有做好自适应分辨率这一关，不过Dark算是基本实现了与Firefox效果保持一至，主要采用的是负边距做到的，想研究请查看本Blog皮CSS文件部份！

然后是纯CSS 弹出式菜单，这可能对于大多数改皮的同志又是一个门槛，不过这个功能只能用于支持CSS 2.0的浏览器，比如IE6就不支持，所以要借助JS帮助一下，我使用的弹出式菜单源CSS来自V2EX不过你对比一下会发现完全不一样，这主要是针对WordPress的问题，要尽量做到灵活，还有就是源CSS里有很多没有用的属性定义，比如text-decoration: none; text-align: left;等，我不知道作者是不是也是去copy的源码，但是对于CSS来说，上级定义了属性那么下级就会有相同的属性，是的，这个功能太漂亮了，会减少很多定义，所以如果你也想研究一下纯CSS 弹出式菜单，那你就查看我写的#menu部份，你会发现代码很少，直观明了。

这里说的可能比较抽象,我当然也没有给出CSS或是什么代码之类的东西,我相信喜欢研究的你一定想到了该怎么做了吧^^!

我也不会写专业的教程，这只是记录自己的学习历程，如果有不对的地方请包含！

更新: 2007.10.8
现在已经有2.12版本了,如果有需要请下Email!

前段时间在V2EX上看到这个程序，都说很Web 2.0的一个统计程序，那就说说她的特点吧!

简单的说，它就是一个网站统计程序，但是跟一般的网站统计不同的是，它是建立在网站自己的空间上的，这样最大的优点就是减少了输出网页的时间。而且Mint的可定制性很强，可以根据个人喜好，自行添加统计插件与风格，你也可以自己设计风格，不过还是觉得官方用了很多心思去设计UI。

还有一点要提一下，就是他是一个商业软件，想拥有需要支付30$一个域名，当然也有盗版的…

目前我只是简单的应用了而已，我并没有加入任何插件，主要是因为我觉得我就一个Blog，而且写日志的时候都很少，默认的功能完全够用了，我也舍不得花30$去买，安装Mint完全是为了体验UI，嘻嘻…

目前我的Mint版本是2.11 插件就两个：
Default Pepper ; 这个是Mint的核心了，通过它可以查看到特定时间之内的网站访问数，平也能够统计网站访问的来路和访问目标等等。它通过不同的版面展示了网站的pageview,referrer,还有搜索关键字等等。
backuprestore ;顾名思义，因为Mint的访问数据都是存在mysql数据库中的，所以备份数据是很重要的。

核心自带两款风格，还外加了以下风格
- Clearmint;
- Clearmint Ice;
- Massive Blue;
- Pepper Mint;

以后我可能会安装一些插件吧，时间也不是很多，毕竟搞一个Blog已经比较累了，还要工作，还要修改我的XMPP Robot，偶然也喜欢发布一下自己写的WP风格，所以时间真的有限。

记得上小学的时候,老师有一天就让我们玩这个游戏,都过去那么多年了,心里一直都还记得当时的那种好奇心与觉得事物的神秘,记得那次游戏后心里久久不能平静,这次是在网上发现别人把他做成了Flash的,于是就拿出来和大家分享。

神奇的魔术，当你明白了就不神奇了
“吉普赛人祖传的神奇读心术.它能测算出你的内心感应”

　　提示:
　　任意选择一个两位数（或者说，从10~99之间任意选择一个数），把这个数的十位与个位相加，再把任意选择的数减去这个和。例如：你选的数是16，然后1+6=7，然后16-7=9
　　在图表中找出与最后得出的数所相应的图形，并把这个图形牢记心中，然后点击水晶球。你会发现，水晶球所显示出来的图形就是你刚刚心里记下的那个图形。

[kml_flashembed movie="http://fvzone.com/zone/heart2.swf" height="380" width="530" /]

更换的时候还发生了一点小事，当我想好了要注册FVcity.com的时候，没想到过了几天确被别人注册了，不管注册的人是恶意搞还是想自己用，都没的关系了，觉得那个域名仍然令我不太满意，不过很明显有人在恶搞，就现在访问那个域名也没有使用。

言归正传，本次启用的正式域名为fvzone.com，英文全称为:Fire Vision Zone，中文翻译为：“火视野.地带”，raidybor.com在9.5号到期，我将不会再使用它了，请大家以后使用fvzone.com访问本站，谢谢！

这次更换和从前使用的火视野城市的网站字名也一起更新为“火视野.地带”，目前正在设计新的标志。

其实我希望开发更多的手册查询功能，但是因为自己牵及的领域与工作相关，很多时间也没有太多的时间，但我仍然喜欢大家提供一些经典教程手册的文件，我将他做成在机器人上查询的手册，如果你也同样是开发爱好者，你可以自己将手册做成XML格式，这样方便操作与修改。

这套机器人的扩展部份并没有随着核心一起发布，目的是希望大家自己能开发出更好更有特别的功能，我将全力维护这只机器的核心程序。

下一步：我正在开发群组聊天扩展，可能不久就会完成，更多新功能，新关注我们的Blog,谢谢！

FV.Zone Team机器人帐户：fv.live@gmail.com;欢迎大家测试!

XMPP核心程序下载地址:http://fvcity.googlecode.com/files/note-test.rar
目前自带有英文单词翻译扩展。

服务器模块:
必须有:Curl,否则英文单词函数将不能运行，wamp 套件中有这个模块。
当服务器设置allow_url_fopen = Off 的时候我们使用Curl来进行远程访问。

登陆设置：
OK，现在设置登陆信息，首先我上一次说无法直接登陆talk.google.com 但这次完全解决了这一问题，这次发布的版本中含有两个驱动，一个

是用于普通Jabber服务器驱动，一个是专为Google talk使用的驱动。

首先设置登陆Gtalk信息，这次增加了一个参数domain，是针对Gtalk的，如果你使用Gtalk才填写,不使用请留空，这个也将作为后面加载两个

不同驱动的依据。
打开note\bots\parrot\parrot.ini.php文件。
“server” => “gmail.com”, //这里是服务器名称
“domain” => “talk.google.com”, //这个是Gtalk的 DNS
“bot_name” => “Parrot Bot”, //机器人名字，这个没有意义只是在后台区别
“bot_user” => “用户名”, //用户名，你在jabber.org注册的用户名
“bot_password” => “******”, //密码，这个不用我说了吧。

关于jabber.org怎么注册，你可以使用一些常用的jabber.org客户端进行注册,这里我推荐你用Pidgin。

到这里，将文件放到web服务器的目录里去，访问index.php文件，现在你可以看到有一个帐户出现，当然你可以创建几个或是更多。
点击start，几秒后上线的提示、变成绿色，就显示登陆成功了，本机器人不没有实际的功能。

2007.8.3 修正与加入:
修正Gtalk驱动多处错误，不能在windows中使用等等。
加入消息控制函数ControlMessage($from, $body)，接管所有接收与发送的信息处理。
加入了一个单词查询函数dict($dictcontent)。
优化前台CSS与AJAX,100% CSS布局。

2007.7.12 修正与加入:
修正输入中文的时候，机器人无故死掉的BUG。
修正机器人回话的BUG,后来无法回话。
对后台重新设计，使用简洁的css布局。

本次修正也没有对机器人重新命名,或是改版本,因为这只是一个测试版,为了尊重作者请使用原版,当我自己对源码改动达90%的时候可能会发布

自己的版本,在前台没有留下认何和我有关的信息。
请尊重别人的劳力成果，我与Ferdy Christant是好朋友，他也在制作新版本，不过因为他工作的原因，可能会晚一点发布。
如果在国内我发现有人冒名改动，改版权，使用在商业中，我将保留所以权利，目的是尊重别人。

所有使用本机器人造成认何损失本人不负责，也不提供认何技术支持，如果有问题请到我Blog:raidybor.com/blog 提出，我们共同探讨。
谢谢你们的关注！

下载地址:http://fvcity.googlecode.com/files/note-test.rar

在出错时如果对代码做简单检测可以省去很多头痛的问题。W3C对于XHTML与CSS 都有检测工具可用，请见 http://validator.w3.org 。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。

2.使用浮动功能时记得使用清除命令

浮动是个危险的功能，未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况，请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。
在使用的时候记得不使用就清除它,其实我很喜欢使用浮动功能。

3.边界重合时利用padding或border来避免

您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来。如果您有用到margin，那么很容易产生边界的重合；Andy Budd在他的网站上解释了可能的做法。

4.尝试避免同时对元素指定padding/border以及高度或宽度

Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题，但如果母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时，在母元素套用padding以达效果。

5.不要依赖min-width/min-height

Windows版IE并不支援两种语法。但是在某种程度下，windows版IE可以达到相当于min-width/min-height的效果，所以只要对IE做点过滤功能，即可达到您想要的结果。

6.若有疑问，先减少百分比

有时候某些错误会使50%+50%成为100.1%，使网页出现问题。这时请尝试将这些值改为49%，甚至49.9%。

7.记住“TRouBLed”写法

Border，margin与padding的简写语法有特定顺序，从上方开始顺时针方向转动：top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界，右边1像素，以此类推。记住“TRouBLe”，您就不会弄错次序了。

8.只要不是零的值，都要指定单位

CSS需要您对每个font，Margin等各种值指定单位。（唯一的例外是line-height）

备注：本文有部份是网络资源。

一直觉得Google是一个不错的搜索引擎，今天他又推出google apps测试版，现在已经有了中文版，最大的好处是将自己的域名和Google talk和email服务等绑定，也就是说可以使用自己的域名登陆gtalk,这真是太有个性了，是的我也非常喜欢。

不过要说的还是Gmail一个大功能，上次有人说live的不支持php3和smtp，不知道现在还是不是这样的，不过我告诉你，Gmail是绝对支持的，这真是太好了。

还要说一下，注册的时候有一个技巧，在你注的时候国家要选美国，要不然很可能注册不成功，我开始也失败了两次。

关于域名自定义的问题：
目前CNAME的功能使用不了，因为ghs.google.com被祖国的超级防火墙挡在了门外，这真是一件让人觉得不知道说什么的事，所以自定义域名就用不了了，不过还可以转发的功能，呵呵。

这是我使用的截图:

注册地址是：http://www.google.com/a/

当我注册成功后，研究设置和管理后台后发现功能真是太强大了，更多的我也在测用中，如果你有什么好的发现也请告诉我吧！

首先安装好Web服务器环境，我是在Windwos下使用的，所以我用的是wamp web 套件请记住PHP一定要在5以上。
OK，现在设置登陆信息，首先我要告诉你一个不幸的事，目前这个机器人仍然没有办法与talk.google.com 直接登陆。

不过，你可以使用jabber协议服务器的其它的服务商，比如jabber.org，或是jabber.org服务器等，我用的是jabber.org,这样你仍然可以用Gtalk加***@jabber.org加好友进行聊天。

打开note\bots\parrot\parrot.ini.php文件，
“server” => “jabber.org”, 这里是服务器名称
“bot_name” => “Parrot Bot”,机器人名字，这个没有意义只是在后台区别
“bot_user” => “用户名”, 用户名，你在jabber.org注册的用户名
“bot_password” => “******”,密码，这个不用我说了吧。

关于jabber.org怎么注册，你可以使用一些常用的jabber.org客户端进行注册,这里我推荐你用Pidgin。

到这里，将文件放到web服务器的目录里去，访问index.php文件，现在你可以看到有一个帐户出现，当然你可以创建几个或是更多。

点击start，几秒后上线的提示、变成绿色，就显示登陆成功了，本机器人不没有实际的功能。

修正与加入:
修正输入中文的时候，机器人无故死掉的BUG。
修正机器人回话的BUG,后来无法回话。
对后台重新设计，使用简洁的css布局。

期望解决的问题，就目前无法直接登陆talk.google.com的问题，目前已找到修正jabber 类库，可是无法使用
新类被放到inc中，名字为class.jabber.php s
谢谢你们的关注！

下载地址:/blog/wp-content/uploads/note.rar