JasonLee's Blog!

按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？　　有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，所以我个人不大喜欢。　　后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成，但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证 html 比较干净，所以用得还是比较多的。　　再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，IE自然又是不支持的，所以这种方法和上一种方法一样都对 IE 做了不同处理（具体就是触发layout），不同的就是overflow 没有 :after 伪类那么麻烦了，缺点也有，overflow 可能会产生一些小冲突。　　在使用 overflow 之前还有过一种使用 float 的方法，就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素，但原理却是不同的，IE/Win 中 float 触发了 layout 因而闭合了浮动，而在标准兼容浏览器中，float 其实和上一种方法中的 overflow 原理一样，产生了一个“块级格式化范围”——这是CSS 规范中提到的一种现象，它往往具有某种独立性，特性之一就是会自动闭合内部的浮动元素。

在用DIV+CSS切页面时,会经常遇到一个问题，把div容器的border设置为1px，容器里面的内容设置了float属性。在IE6下，容器的边框在渲染的时候总有残缺，显示不完全，感觉若隐若现。但是把鼠标放上去，晃动一下就没有问题，马上就显示完整。在IE7和Firefox下都没有这种问题：

...

在前端开发中我们经常会要调试页面，主要html、css调试和js调试，这里整理一些工具：

一、firefox网页调试插件

1.firefox插件Firebug

主要用于html、css的调试和js调试；推荐指数：

1.Firebug http://getfirebug.com/
最流行的前端开发工具

2.HttpWatch http://www.httpwatch.com/
集成在IE和Firefox上的监听HTTP和HTTPS的工具

前端开发或者说“网页制作”、“前端制作”、“网站重构”，这样的一个职位的主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML、CSS、JS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。今天介绍一些WEB前端开发必备工具，以便大家参考使用，大家有什么好的工具，可以留言与厉害分享。

1、Adobe Dreamweaver

Adobe Dreamweaver 是建立 Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于 CSS 的设计的领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。

关于<meta http-equiv="x-ua-compatible" content="ie=EmulateIE7" />

<meta http-equiv="x-ua-compatible" content="ie=7" />

...

event对象

IE 中可以直接使用 event 对象，而 FF 中则不可以，解决方法之一如下：
var theEvent = window.event || arguments.callee.caller.arguments[0];

第二种是将 event 作为参数来传递:
function xxx(e){var theEvent = window.event || e;}

srcElement 和 target

...

现在浏览器的内核引擎，基本上是三分天下：

Trident: IE 以Trident 作为内核引擎; 　　

Gecko: Firefox 是基于 Gecko 开发;

WebKit: Safari, Google Chrome,搜狗浏览器 基于 Webkit 开发。

WebKit 内核在手机上的应用十分广泛，例如 Google 的手机 Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。

以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila FF

1. document.form.item 问题

现有问题：
现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
解决方法：
改用 document.formName.elements["elementName"]

...

流行的JavaScript库，如jQuery, MooTools, Prototype, Dojo和YUI等，完成起常见的JavaScript任务来得心应手。这些JS库为客户端动作(events)、动画特效(effects)，和AJAX应用等提供很多现成的函数。而且如果这些库中的某一个无法直接达到你要的效果，还可能会有相关插件满足你的要求。