前端 tips(2010.7)
本月前端 Tips:
7.1 - 7.284.【CSS】绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发。Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性,使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。(https://developer.mozilla.org/en/CSS/pointer-events)
83.【JS】Number,Boolean,String,Undefined这几种基本类型混合比较时,会将其转换成数字再进行比较;基本类型与复合对象进行比较时,会先将复合对象转换成基本类型(依次调用valueOf与toString方法)再进行比较;undefined被当成基本类型,undefined转换成数字是NaN,因此undefined与除null之外的其它类型值进行比较时始终返回false(注意NaN==NaN返回false);null被当成复合对象,由于null没有valueOf与toString方法,因此和除了undefined之外的其它类型值进行比较时始终返回false。(http://www.javaeye.com/topic/696802)
7.5 - 7.9
84.【CSS】IE6及IE7/8怪异模式下,绝度定位元素当指定了left及right,而width或者height为默认值auto,此时浏览器无法正确地计算出width或者height的值,应该尽量避免此种情况设定固定的宽高,如不能避免,可以通过js获取宽高进行设置。(Google)
85.【JS】在插入文档后,IE下input.type属性为只读,如果需要修改可以通过新建另一个input控制显隐来达到目的。
86.【HTML】media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一。(详情:http://www.qianduan.net/media-type-and-media-query.html)
87.【HTML】关于 Canvas 和 SVG 探讨的一篇文章:http://www.sitepoint.com/blogs/2010/07/06/canvas-vs-svg-how-to-choose/
88.【JS】"==" 比较两个对象会自动进行类型转换,例如比较 '12' == 12将返回 true;而 "===" 不进行任何转换必须完全相等 '12' === 12 将返回 false。
7.12 - 7.16
89.【JS】想在IE6,IE7中创建一个父页面元素,那么你必须使创建元素属于父页面。var dummy = parent.document.createElement("div"); 在Firefox,IE8中,它允许在一个文档中创建要追加到另一个文档的元素。所以在Firefox,IE8中,可以使用parent.document也可以使用document。(张军)
90.【JS】e.preventDefault()仅仅是阻止默认事件,而 return false; 同时阻止了事件冒泡,详情参阅:http://css-tricks.com/return-false-and-prevent-default/
91.【JS】在webkit排版引擎浏览器中,用脚本动态设置style后,即使removeAttribute('style');,也可以访问到style中的css属性值,而FF、IE、Opera下均不可获取。 例子: obj.style.width='500px'; obj.removeAttribute('style'); console.log(obj.style.width);//webkit排版引擎下可以获取到值(熊松松)
92.【HTML】关于 Firefox 在怪异模式下的一些特性:http://www.javaeye.com/topic/709316
93.【CSS】在 IE6/7/8 怪异模式中,当使用一对引号将所有的字体家族名连同分割的逗号全部包含,浏览器会修复此定义错误,多余的引号会被忽略。比如:body{font-family: "Arial, Tahoma"},IE6/7/8 怪异模式会修复此定义错误,而解析为:body{font-family: Arial, Tahoma},所以默认的字体为 Arial,而其它浏览器或者标准模式下则会以之为错误而不解析,最终使用浏览器默认字体。(Google)
7.19 - 7.23
94.【JS】Array.prototype.sort的兼容以及相关知识:http://www.javaeye.com/topic/714688
95.【HTML】仅在Firefox中,table元素宽度属性百分比大于100%时,Firefox会按100%处理;如果是style中的CSS特性,则不会这么处理。建议给TABLE元素设置宽度的时候,不要使用width属性,而是使用CSS中的width特性。(Google)
96.【PHP】$_GET 和 $_POST 等用户提供的数据如果使用不当,如验证、过滤不全面,就很容易造成安全问题。通常情况下,我们会编写“一坨”正则来验证数据格式是否合法。详情请参阅:http://www.gracecode.com/archives/3029/ (明城)
97.【JS】focus() 方法可滚动文档以使 Anchor 对象或者表单元素的位置变为可见,因此在定位表单或者锚点时不需改变 hash 而通过 focus() 方法来实现。
98.【CSS】IE6及IE7/8怪异模式仅支持A元素的:hover及:active,IE7标准模式支持所有元素的:hover,但:active仍仅支持A元素,除IE8标准模式以外的IE均不支持:focus。(Google)
7.26 - 7.30
99.【JS】设置option元素中的文本时需要注意:用doc.createElement('option')创建的节点,IE是无法直接设置text来改变文本的。必须通过 option.appendChild(doc.createTextNode(txt));来实现。但是,一旦节点被插入到页面DOM后,就可以直接设置option.text了。(熊松松)
100.【JS】delete 操作符用来删除对象的属性或者数组元素,对于使用 var 来声明的变量,是不能删除的,这一点在所有浏览器里表现一致(注意:在 firebug 中可以删除),直接全局声明(未带 var)的变量可以删除,这一点在 IE 9 preview 中除外。详情可参阅: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator http://www.javaeye.com/topic/720816
101.【HTML】样式的解析规则是从右到左,比如 div p {},浏览器解析是先匹配到 p,再匹配到 div。(圆心)
102.【Flash】SWF 嵌入到网页中默认 wmode 为 window,意味着是在页面中以新窗口模式播放flash,不受HTML影响,永远在页面最顶端。(龙藏)
103.【CSS】IE6 下没有“干净”的空 div,必须显式地设置 line-height 为 0 方可。(法海)
这篇文章发布于 2010年07月30日,星期五,00:01,归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论,或者从您的站点trackback。
学习了
整理了这么多,回去慢慢学。
[...] http://www.12sui.cn/css/tips-2010-7/ 此条目发表在 未分类 分类目录。将固定链接加入收藏夹。 ← 这一年 [...]
[...] http://www.12sui.cn/css/tips-2010-7/ 此条目发表在 转载 分类目录。将固定链接加入收藏夹。 ← [...]