03 2011 档案

对CSS HACK的一些看法
摘要：那天瓜哥讲了个问题，说说css HACK的一些看法，说说自己的想法，不对多指教。 由于各种浏览器对css的解析存在差异，使同一页面在各种浏览器下表现出来的效果也会不同。为了解决这个兼容性问题，css hack技术产生了。个人认为css hack技术其实是一种欺骗浏览器的技术，通过在选择器、属性等地方添加一些特别符号来使某些浏览器无法解析该选择器或属性，以达到区分不同的浏览器的目的。其实个人觉得css hack是不安全的，有风险的，现在的浏览器更新很快，版本也出现了好几个，谁也无法100%保证为这个版本浏览器所设置的css hack在下一个版本依然有效。比如在ie7还没出来之前，!import. 阅读全文
posted @ 2011-03-27 12:36 allexwang 阅读(487) 评论(2) 推荐(0)
《正则表达式必知必会》读书笔记
摘要：下面是读书笔记，若有错误或不足，欢迎指出。一起交流，共同进步。第一章 正则表达式干啥用1.正则表达式用途：①搜索②替换。 定义：正则表达式是用正则表达式语言创建的。用于解决文本匹配替换问题。第二章 匹配单个字符1.纯文本正则表达式匹配原始文本内对应字符。2.正则表达式区分大小写。3.正则表达式中 . 字符可以匹配任何一个单个的字符。可匹配任何单个的字符、字母、数字甚至是 . 字符本身。（除换行符外）4.\是一个元字符（metacharacter，表示这个字符有特殊含义，而不是字符本身含义）。第三章 匹配一组字符1.元字符[和]，两个字符之间所有字符进行匹配。2.字符区间可以用元字符-（连字符） 阅读全文
posted @ 2011-03-26 00:17 allexwang 阅读(431) 评论(0) 推荐(0)
Javascript闭包真经
摘要：继前阵子写完对象真经后，这篇文章我尝试尽力的去讲透Js中的闭包。这里要感谢爱民，爱民的书写得很好，我从中获益良多。不过这次我打算换一种思路来写这篇真经，就是采用提问回答的方式，我下面先提出我要回答的问题，如果读者你都很自信的能够回答上，那么就可以考虑干别的事情去了。如果感觉自己有点把握不准就请给我一步步的寻址吧。:)我保证最后你就会豁然开朗，明白闭包的真谛。问题集：什么是函数实例？什么是函数引用？什么是闭包？闭包里有什么玩意？函数实例、函数引用和闭包有什么联系？闭包的产生的情形？闭包中的标识符的优先级是什么样的？闭包带来的可见性问题。什么是函数实例呢？其实在我们平常书写代码的过程中，写的函数就 阅读全文
posted @ 2011-03-22 17:16 allexwang 阅读(1106) 评论(0) 推荐(0)
CSS2.1的容错机制
摘要：CSS2.1是当前普遍使用着的CSS版本，平时如果循规蹈矩的编写CSS，或许不会发现问题，可问题就是：如果想要保存的时候，不小心按Ctrl+s的时候多留了一个s在CSS文件里，问题就开始来鸟；或者是不小心在规则的大括号外边多写了一个分号……出错的事情是千奇百怪的，对于新手来说频率可能会高些。出现这样的问题的时候、调试起来你可能会感觉很莫名其妙，这就需要了解一下CSS2.1版本的容错机制了。CSS2.1的容错方式总的来说就是：对于出现一些无效的属性、属性值、@-keywords等等，它就会忽视这些样式声明或者整个规则声明。对于无效的属性、属性名会忽视该样式声明，对于@-keywords中keyw 阅读全文
posted @ 2011-03-22 16:20 allexwang 阅读(643) 评论(0) 推荐(0)
未知高度的图片垂直居中
摘要：图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。方法一：该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用 阅读全文
posted @ 2011-03-19 23:43 allexwang 阅读(360) 评论(0) 推荐(0)
详解块级格式化范围（block formatting context）
摘要：详解块级格式化范围（block formatting context）前几天讲闭合浮动元素的时候提到了块级格式化范围（block formatting context），现在我来详细解释一下。先看图片:这两个普通的div的边距都是20px，但实际的边距不是20px+20px=40px，而是取20px，这就是最开始学css的同学总和我说的边距重叠，当俩个普通的div相遇时会有以下规则：当两个div的边距都是正的时取最大的margin最为边距。当两个div的边距都是一正一负时,边距为他们的边距相加。刚才说的是普通情况下，所谓的普通就是没有长生格式化范围，看第二个图是产生格式化范围的情况，就是边距没 阅读全文
posted @ 2011-03-19 23:15 allexwang 阅读(670) 评论(0) 推荐(0)
从清除浮动（clear float）谈拥有布局（has layout）与块级格式化范围（block formatting context）
摘要：从清除浮动（clear float）谈拥有布局（has layout）与块级格式化范围（block formatting context）float是网页布局中都要使用的css属性，他为我们灵活布局提供了方便，但同时浮动太多会带来很多麻烦，所以我通常的做法是使用float完后，马上清除他。float的本质是脱离的正常的html文档流，就是由于他脱离的文档流才出现了很多麻烦。清除浮动（我更喜欢叫闭合浮动元素）的最简单的方法就用<div style=”clear:both;”></div>加入空的标签，但是这种不够语义化，也显得不是很灵活，每次都要加额外的html。于是有人 阅读全文
posted @ 2011-03-19 23:14 allexwang 阅读(360) 评论(0) 推荐(0)
关于javascript字面量
摘要：javascript字面量 在JavaScript里面，字面量包括：字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，另外还有函数字面量(function literal)。 如果以前没有接触过字面量这个词，一时间真的难以理解，定义都是写的很玄乎的，读完可能会完全不知所云，于是上网百度+google了一番，关于字面量方面的资料不多，写的都比较零散。 1. 字符串字面量（String Literal）是指双引号引住的一系列字符，双引号中可以没有字符，可以只有一个字符，也可以有很多个字符（来源：互动百科）。 在编程 阅读全文
posted @ 2011-03-19 10:25 allexwang 阅读(4742) 评论(0) 推荐(0)
什么是BOM（浏览器对象模型）
摘要：如果你不知道BOM，那你应该知道DOM。DOM：(Document Object Model) 文档对象模型。BOM：(Browser Object Mode) 浏览器对象模型。从上面的对比中，可以很清晰的看出，BOM与DOM的最大区别既是B(Browser)和D(Document)的区别，那Browser和Document有什么差别呢，从下面的一张图上看，DOM的根节点是document。经常编写JavaScript代码，也许你会想到window对象，为啥DOM里面没有window，这就是BOM与DOM的区别了，window是JavaScript的顶端对象之一，它是隶属于浏览器层次的，它独立 阅读全文
posted @ 2011-03-19 10:18 allexwang 阅读(4997) 评论(1) 推荐(0)
整理一些JavaScript的IE和火狐的兼容性解决方法
摘要：整理一些JavaScript的IE和火狐的兼容性解决方法，有更好的方法多多交流；1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在Firefox(火狐)下运行 (2)解决方法： 改用 document.formName.elements["elementName"] (3)其它 参见 22. 集合类对象问题 (1)现有问题： 现有代码中许多集合类对象取用时使用 ()，IE 能接受，Firefox(火狐)不能。 (2)解决方法： 改 阅读全文
posted @ 2011-03-16 23:09 allexwang 阅读(465) 评论(0) 推荐(1)
E6下默认不缓存背景图片
摘要：解决IE下图片作为背景时，有鼠标操作时的抖动问题方法一、css(不推荐)复制内容到剪贴板代码:1html {2filter: expression(document.execCommand("BackgroundImageCache", false, true));3}方法二、js复制内容到剪贴板代码:try{document.execCommand('BackgroundImageCache',false,true);}catch(e) {} 阅读全文
posted @ 2011-03-16 10:27 allexwang 阅读(211) 评论(0) 推荐(0)
最短的IE判定
摘要：以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。Code:var ie = !+"\v1";仅仅需要7bytes！参见这篇文章，《32 bytes, ehr ... 9, ehr ... 7!!! to know if your browser is IE》，讲述外国人是如何把IE的判定从32 bytes一步步缩简成7 bytes!的故事但这纪录今年1月8日被一个俄国人打破了，现在只要6 bytes!它利用了IE与标准浏览器在处理数组的toString方法的差异做成的。对于标准游览器，如果数组里面最后一个字符为逗号，JS引擎会自动剔除它。Code:var ie 阅读全文
posted @ 2011-03-13 08:45 allexwang 阅读(308) 评论(3) 推荐(0)
position:fixed在IE6下的实现
摘要：Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。值描述static默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。relative位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。absolute位置设置为 absolute 的元 阅读全文
posted @ 2011-03-11 07:52 allexwang 阅读(273) 评论(0) 推荐(0)
IE6下链接伪类（:hover）CSS背景图片有闪动BUG
摘要：IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。例如：CSS代码a:hover{background:url(imagepath)}常用的解决方案：在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。XML/HTML代码!–[ifIE6]scri... 阅读全文
posted @ 2011-03-11 07:51 allexwang 阅读(517) 评论(0) 推荐(0)
什么是DOCTYPE
摘要：DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写 阅读全文
posted @ 2011-03-11 07:42 allexwang 阅读(325) 评论(0) 推荐(0)
Query中的$.getJSON
摘要：jQuery中常用getJSON来调用并获取远程的JSON字符串，将其转换为JSON对象，如果成功，则执行回调函数。原型如下：jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据。简单示例：服务器脚本，返回JSON数据：$.getJSON.php$arr=array("name"=>"zhangsan", "age" 阅读全文
posted @ 2011-03-08 10:11 allexwang 阅读(738) 评论(0) 推荐(0)