四有新人

本站不支持IE，谢谢

RSSRSS twitterTwitter FacebookFacebook Google+Google+ eMaileMail

浏览器Quirksmode(怪异模式)与CSS1compat

十 31

Wang Wen HaoWeb开发 1 Comment

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：

  1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
  2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考。
  3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
  4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
  5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
  6. 在ie6中，如果在doctype声明前有一个xml声明(比如:)，则采用quirks mode解析。这条规则在ie7中已经移除了。

Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上，这也是我们在js里要注意的地方。

什么是盒模式？ 这是针对块级元素说的，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。

在Standars mode中：

元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在Quirks mode中：

width则是元素的实际宽度，内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

  1. 内联元素 ，例如<a>|<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。
  2. 内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如<a>|<em>|<span>等都为内联元素。内联元素可以为任何其他元素的子元素。
  3. 浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
  4. 如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。
  5. 边界值可为负，其显示效果各浏览器可能不相同。
  6. 填充值不可为负。
  7. 边框默认的样式（border-style）为不显示（none）。

在js中如何判断当前浏览器正在以何种方式解析？

document对象有个属性compatMode ,它有两个值：

BackCompat 对应quirks mode

CSS1Compat 对应strict mode

各浏览器的兼容性表，可以查看PPK的网站。

 

为HTML5的未来制定学习计划

七 08

Wang Wen HaoWeb开发 , No Comments

利用web技术进行应用开发的趋势已深入人心，甚至web浏览器以外亦是如此。最近披露Windows 8将会为编写运用HTML 5技术的应用提供支持只不过是契合了其在开发界的转变而已。因此问题是：你打算如何应对？

如果你没有在一直地密切跟踪，很容易就会做出这样的猜测，为什么突然之间Web技术会扮演桌面应用开发平台的角色。在正在定稿的HTML5标准里面，添加了一些新的项目，这些项目为HTML目前的文档格式附加上了真正的应用开发能力。过去，庞大的JavaScript框架及浏览器插件是某些相当琐碎的功能之所需。

HTML5依靠添加对视频流、多线程以及异步处理（通过“Web Workers”消息传递系统）、利用套接字直接通信等的支持来改变这场游戏。尽管一个文档格式标准拥有这些能力会吓到某些人（包括我本人在内），但是车轮滚滚，这仍是HTML 5的前进方向，而且它还有苹果、微软、谷歌、Mozilla、Adobe等公司给它撑腰。此外，各种不同的框架的存在让它能够轻易地将Web应用直接与后台的Web服务连接起来。其结果是，对于许多任务来说，HTML 5现在跟Silverlight、Flash、Flex/AIR以及JavaFX等技术一样出色（尽管在某些事情上那些仍做得更好）。

以下就是你希望学习来步入此门槛的技术：

HTML5： 尽管HTML5作为标准可能尚未完全确定，但是到了这个阶段变动不会太大了。目前，它已经是可用的，并在相当一些浏览器上有了实现。你现在可以开始学习它了。

CSS： 如果你对CSS还不熟悉，现在正是学习它的大好时机。浏览器支持还在不断完善，且现在IE6在市场的份额已经很少，对此开发人员已经觉得可以放心地忽略不计。

Web services： 每一种主流的服务器端开发语言都拥有一个框架或一套库，以便容易地生成web服务，如.NET中的Windows Communication Foundation （WCF）。理解这些基础应该不需要花费太多的学习精力。你也许特别希望学会如何生成JSON的输出，此物正在迅速变成Web应用的通用语。还有，确保你理解了RESTful Web服务。在现代的开发环境下，相对于SOAP来说，尽管它们可能需要花费更多的功夫，但是其可访问性可用性也要高得多。

JavaScript： 相对于传统的ASP.NET或类似开发需求来说，新的应用开发范式需要多一点JavaScript方面的知识。

jQuery： jQuery已经成为可用的客户端开发框架；它似乎可用包办一切。在利用一组扩展的插件的情况下，如果你想玩点UI的花样，很可能jQuery能帮你忙。

这些技术现在构成了若干不同的开发系统的基础。移动网站就是一条好的途径，靠它可用最少的功夫来达到最多的移动用户。像Appcelerator的Titanium那样的工具允许你在若干平台上（包括桌面和移动）在其系统之内使用web技术。其他的系统，像OutSystem的Agile Platform打包了像jQuery这样的库，使得开发桌面或移动web应用变得极其简单。Windows 8，尽管细节仍很含糊，看起来似乎会拿IE9（或彼时的当前版本）作为HTML 5的运行环境，来充当脱离明显的浏览器窗口之外的本地应用。可以推断，这些应用会拥有增强的特权来访问本地资源，也可能其行为会更像是本地应用。

自学上述核心技术可谓聪明的一步，今年9月微软的BUILD大会举办过后，我们就应该了解到该公司Windoes 8的策略调整计划，并能发现还有哪些东西需要我们去学。

仿人人网底部“返回顶部”按钮实现

七 06

Wang Wen HaoWeb开发, 互联网 , 12 Comments

最近上人人网的时候，发现页面的底部有一个“返回顶部”的按钮，于是在自己的网站上也搞了一个，其实非常简单。

首先，修改主题模板的footer.php文件，</body>上面加入如下代码：

<div id="toolBackTo" style="display: none;" class="back-to">

    <a title="返回顶部" onclick="window.scrollTo(0,0); return false;" 

        href="#top" class="back-top">返回顶部</a>

</div>

上面这段代码是完全Copy自人人网的源代码。返回页面顶端的代码很简单。

接下来修改style.css文件，加入上面div和链接的样式：

.back-to {

    position: fixed;

    bottom: 10px;

    right: 10px;

    z-index: 999;

    width: 110px;

    overflow: hidden;

    zoom: 1;

    -ie6-position-fixed-delay: 200;

}



.back-to .back-top:hover {

    background-position: -50px 0

}



.back-to .back-top {

    float: right;

    display: block;

    width: 50px;

    height: 50px;

    background: url(http://a.xnimg.cn/imgpro/button/back-top.png) no-repeat 0 0;

    margin-left: 10px;

    outline: 0 none;

    text-indent: -9999em;

}

非常不好意思，这些代码也是原样copy自人人网。

.back-to就是div的样式，它的position设为fixed。这样它就会固定在页面的某个地方。在这里它的位置是bottom: 10px; right: 10px，就是右下角距离浏览器边角各10px的位置。

到这一步，基本功能已经实现了，当我们把页面滚动到下方的时候，点击这个按钮，就会自动跳到页面的顶端。

不过，当页面在顶端的时候，这个按钮其实没有存在的必要，我们可以用javascript来控制它。

再回到footer.php文件，在刚刚的代码下面加上如下代码。

<script type="text/javascript">

$(function(){

    var bt = $('#toolBackTo');

    var hl = $.browser.webkit ? $('body')[0] : $('html')[0];



    $(window).scroll( function() {

        var st = hl.scrollTop;

        show = (st>30);

        if( show ){

            bt.show("slow");

        }else{

            bt.hide("slow");

        }

    });

});

</script>

这段代码用到了jQuery，所以需要先检查一下当前模板有没有引用jQuery，如果没有的话要在header.php里引用它。

我们给window对象绑上了scroll方法，在页面滚动的时候触发来控制返回按钮所在div的隐藏和显示。

代码非常简单。

日历

2012 年二月
日 一 二 三 四 五 六
« 十    
 1234
567891011
12131415161718
19202122232425
26272829  

分类目录