相关标签

如何在 IE 中使用 HTML5 元素

Sjoerd Visscher 发现了一个简洁的 方法 让样式在 IE 中作用到未知的元素上——仅需 JS 创建此未知元素即可: document.createElement(elementName) 同理(对于 IE 来说 HTML5 元素即是未知元素),该方法也可顺延到 HTML5 的元素上(详细见:John Resig 写的 《HTML5 Shiv》 一文): <html> <head> <style>section { color: red; }</style> <script>document.createElement(“section”)</script> </head> <body> <section>Hello World!</section> </body> </html> 在 IE 中,为了更方便使用 HTML5 元素,我们可以引入这样的脚本: (function(){ // from: http://dean.edwards.name/weblog/2007/03/sniff/ if(!/*@cc_on!@*/0) return; var html5 = “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’); for(... 29 条评论 »

按钮在 IE 中两边被拉伸的 BUG

大家在写按钮(input、button)的时候会发现在 IE 下: 随着字数的增多,两边的间距也会越来越大。 在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿。 到底是什么原因呢? 蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案: 1、IE 在按钮的 value 值每增加 4 个字节(汉字为 2 个)时,就会在按钮的两边产生总共一个字节的内边距宽度。 2、IE 的按钮(XP 风格)默认样式是一个固定尺寸的圆角矩形图片作背景,所以一旦按钮变宽变高后,这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。 对于第二个问题我们暂时没办法去解决,除非 WIN 系统自己修复 BUG ,但对于第一个问题 ,我们还是可以修复的。 IE 下给按钮元素设置 overflow 属性的 visible 值(注 :padding 值仅在设置了overflow:visible 属性后才有效),这个属性... 27 条评论 »

IE 下 href 的 BUG

在浏览器 IE6 、IE7、Firefox2+、Firefpx3+、Opera9.6+、Safari3.1+中测试以下代码(Demo): <div id=”test”> <a href=”#”> test </a> </div> <div id=”result”></div> <script type=”text/javascript”> (function(){ var test = document.getElementById(‘test’); alert(test.innerHTML); var result = document.getElementById(‘result’); result.innerHTML = test.innerHTML; alert(result.innerHTML) })(); </script> 结果会发现,在 IE6、IE7 浏览器中第二次弹出的 result.innerHTML 中的 A 元素的 href 值成为了绝对路径。 其实先人们早遇到这些问题(感谢 玉伯 提供的资料): 《getAttribute(“HREF”) is always absolute》 《getAttribute href bug》 在上面的文章中已提及了处理方案,就是在 IE 下使用 getAttribute( ‘href’ , […]

... 23 条评论 »

针对 IE8 的 hack

前言:对于 Hack 的使用,一直以来不提倡,应该尽可能的知道为什么,从根本上去解决问题,而不要遇到问题就 Hack,我们应该对代码“不作恶”,尽少使用,甚至不用。 对于 IE8 beta1 可以尝试下面的 Hack: /*/ selector { … } /**/ 此规则仅 IE8 beta1 识别,而其他 A-grade 浏览器都不识别。 不过这个 Hack 也许会在 IE 的 beta2 版本或正式版中被修复,暂可作为 IE8 beta1 调试之用。

... 14 条评论 »

IETester

Multiple IE(支持 XP下IE3 到IE6多版本共存) 相信很多朋友都用过,但其不支持 Vista,最大的问题是该软件已经很久未更新,集成的 IE 版本都过老,不适应现在浏览器测试的需求。 长江后浪推前浪:IETester 。 IETester 支持 Vista 和 XP 下IE8 beta 1, IE7,IE 6 和IE5.5 版本共存。 最新版本:v0.2.1 下载 中文包 (加入Languages 文件夹,默认在 C:\Program Files\Core Services\IETester ) 最小需求:Windows Vista 或者 Windows XP 安装 IE7 版本( 如果安装的 IE6 版本 ,则Windows XP 下的 IE6 有一些小问题,并且在这个配置下 IE7/IE8 版本不能运行 ) 不过任何软件都有不完美之处—— IETester 目前已知的问题有: 当窗口大小改变的时候,页面内容可能会消失(作者改进中); 上一页/下一页功能不正常; […]

... 19 条评论 »

前端开发 IE 中的常用调试工具

第二届 D2 上,小马提到的一些 IE 常用调试工具: Microsoft Script Debugger —— Companion.JS need to install this Companion.JS —— Javascript debugger for IE , like Console API feature IE Developer Toolbar —— Like Firebug (DOM/CSS etc) Fiddler —— Web Debugging Proxy 上面的插件,自己平常工作中也基本用到,不过 Companion 还是第一次听说,自己也孤陋寡闻了一把。 怿飞补充一个:HttpWatch —— HTTP viewer

... 15 条评论 »

IE5 到 IE8 的 CSS 兼容列表

IE 官方提供的 IE5 到 IE8 的 CSS 兼容列表:《CSS Compatibility and Internet Explorer》(小马 最新提供的信息) 很好的参考资料,可以方便帮助大家了解和熟悉各 IE 浏览器之间 CSS 的兼容情况。 个人最近一直对 MS 另眼相看,从 IE 8 Beta 1 发布的第一天起,至少我们看到 MS 的态度,积极开放,结果虽不太如人意,但至少 MS 跨出了重要的一步,放下了一向高傲的姿态 。

... 5 条评论 »

IE8 beta1 中的 CSS 属性

IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器(substring matching attribute selectors),具体规则与正则中的匹配很相似: E[att^=’val’] //子串以’val’ 开始 E[att$=’val’] //子串以’val’ 结束 E[att*=’val’] //子串中包含’val’ IE8 支持绝大多数基本的 CSS2.1 选择器: :before and :after 被支持,只支持文本,不支持图片,但还存在bug 。 :focus 被支持。 display: inline-block 被支持(只能用于内联元素)。 display: table 被支持。 list-style 完全被支持,包括值 upper-greek (此值其他浏览器均未支持)。 outline 被支持。 border-collapse, border-spacing 和 caption-side 被支持。 white-space 完全被支持。 box-sizing 被支持,不过使用的是私有属性 -ms-box-sizing 。 不支持的包括但不限于::first-line 、:first-letter、opacity […]<... 17 条评论 »

z-index在IE中的迷惑(二)

IE中z-index BUG 首先先来看一个演示例子的代码部分。 XHTML 部分: <div id=”container”> <div id=”box1″>这个box应该在上面</div> </div> <div id=”box2″>这个box应该在下面,IE浏览器会对定位元素产生一个新的stacking context ,甚至当元素 z-index的为“auto”。</div> CSS 部分: #container { position: relative; } #box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; } #box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; […]

... 13 条评论 »

z-index在IE中的迷惑(一)

z-index 属性简介 z-index : auto | number auto: 默认值。 number: 无单位的整数值,可为负数 。 z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。 注意:这个属性不会作用于窗口控件,如 select 对象。在IE5.5+中, iframe 对象开始支持此属性。而在之前的浏览器版本中, iframe 对象是窗口控件,会忽略此属性。 z-index 属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z 轴)上的层叠顺序(stack order)。 每一个定位元素都归属于一个stacking context。根元素形成 root stacking context,而其他的 stacking context 则由定位元素产生(此定位元素的 z-index 被定义一个非 auto 的 z-index 值),定位子元素... 5 条评论 »