XBLeXtensible Bindings Language也即是可扩展绑定语言,有点类似IE的HTC,HTC在CSS中的引用格式为：

p{behavior:url(test.htc)}

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- content, property, method and event descriptions go here -->
  </binding>
  <binding id="binding2">
    <!-- content, property, method and event descriptions go here -->
  </binding>
</bindings>

然后就可以通过Firefox的私有属性-moz-binding 将一个元素关联到一个XBL文件中的指定项上:

p {
    -moz-binding:(url('lefter.net/demo/wordwrap.xml.xml#wordwrap');
}

1. FireFox私有属性
2. Firefox XBL
3. Emulating CSS word-wrap for Mozilla/Firefox
4. Cross Browser Word Breaker
5. 连续字体换行的解决方案

1.用CSS执行表达式

*{margin:0;padding:0;}
* html,* html body{ 
	background-image:url(about:blank);
 	background-attachment:fixed;
}
* html .fixed{
    position:absolute;
    bottom:auto;
    top:expression(eval(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.offsetHeight-
    (parseInt(this.currentStyle.marginTop,10)||0)-
    (parseInt(this.currentStyle.marginBottom,10)||0)));
}      
.fixed{
    position:fixed;
    bottom:0px;
    top:auto;
}   

2.让body保持其原有高度，让html只有一个窗口那么高

*{margin:0;padding:0}
*html{overflow:hidden;}
*html body{height:100%;overflow:auto;}        
.fixed{
    position:fixed; _position:absolute;
    left:0;
    bottom:0;
}

推荐阅读
http://tagsoup.com/cookbook/css/fixed/
http://subtlegradient.com/

通过userAgent来判断

通过查找userAgent返回的字符串中一些特定的字符来判断浏览器类型,可以通过indexOf()，返回值是所查找的字符串在整个字符串中首次出现的位置，没有找到要查的字符串其返回值是-1；indexOf()对大小写敏感，而userAgent方法返回值一般为大写混合，以下是常见浏览器的userAgent值

IE7:mozilla/4.0 (compatible; msie 7.0; windows nt 5.1; 
.net clr 2.0.50727; .net clr 3.0.04506.648; .net clr 3.5.21022; ciba)
IE6:mozilla/4.0 (compatible; msie 6.0; windows nt 5.1; 
.net clr 2.0.50727; .net clr 3.0.04506.648; .net clr 3.5.21022; ciba) 
FF:mozilla/5.0 (windows; u; windows nt 5.1; zh-cn; rv:1.9.0.10) 
gecko/2009042316 firefox/3.0.10 
Opera:opera/9.64 (windows nt 5.1; u; edition ibis; zh-cn) presto/2.1.1
Safari:mozilla/5.0 (windows; u; windows nt 5.1; zh-cn) 
applewebkit/528.16 (khtml, like gecko) version/4.0 safari/528.16
Chrome:mozilla/5.0 (windows; u; windows nt 5.1; en-us) applewebkit/531.3 
(khtml, like gecko) chrome/3.0.193.0 safari/531.3

对比上面返回值的差异可以用下面的方法对浏览器进行检查

var ua = navigator.userAgent.toLowerCase();
var _isOpera = ua.indexOf('opera') != -1,
_isChrome = ua.indexOf('chrome') != -1,
_isSafari = !_isChrome && ua.indexOf('safari') != -1,
_isGecko = !_isChrome && !_isSafari && ua.indexOf('gecko') != -1,
_isIE = !_isOpera &&ua.indexOf('msie') != -1, 
_isIE6 = ua.indexOf('msie 6') != -1,
_isIE7 = ua.indexOf('msie 7') != -1;		

点击查看示例

通过浏览器的私有属性来判断

• IE支持创建ActiveX控件，因此ActiveXObject函数也是IE独有的
• Opera提供了专门的浏览器标志，就是window.opera属性
• Safari有一个私有的openDatabase属性
• Chrome和Firefox有一个MessageEvent函数，但没有Firefox的getBoxObjectFor
• Firefox有一个getBoxObjectFor函数用来获取DOM的位置和大小,类似IE的getBoundingClientRect

因此可以大概用一下代码

var ua = navigator.userAgent.toLowerCase();
var _isOpera = window.opera,
_isChrome = window.MessageEvent && !document.getBoxObjectFor,
_isSafari = window.openDatabase,
_isGecko = document.getBoxObjectFor,
_isIE = window.ActiveXObject;
if(_isIE ) alert("ie");
if(_isGecko ) alert("isGecko ");
if(_isChrome ) alert("isChrome ");
if(_isOpera ) alert("isOpera ");
if(_isSafari ) alert("isSafari ");

有兴趣的朋友去看看看！有个疑问了，为什么IE的版本越到后来，bug越多呢？

一般来讲浏览器是通过DTD来判断模式的；浏览器进入Standards模式的DTD有：HTML的strict.dtd和loose.dtd这两个DTD的简单区别是

• strict去掉了许多表现的标签，有利于结构和表现的分离
• loose会导致Firefox进入Almost Standards模式，在图片的处理上会有微小的差别

在IE6下，如果在DTD之前有任何字符都将导致其进入quirks模式

Quirks模式与Standards模式的区别

quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框

在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下，也会有这个问题

可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效

可设置百分比的高度

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的

用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:

body{text-align:center};#{content:text-align:left}

设置图片的padding会失效

Table中的字体属性不能继承上层的设置

white-space: pre会失效

许多CSS默认样式将不同

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效

JavaScript中的区别

Quirks mode的Table of measurements

参考

• Table of measurements
• MSDN

dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat，分别对应quirks mode和strict mode

void function(){
var mode=document.compat
if (mode="BackCompat")
alert("当前以quirks mode的方式渲染页面");
else if(mode="CSS1Compat")
alert("当前已strict mode的方式渲染页面");
else alert("浏览器版本不支持compatMode");
}()