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,f... 24 条评论 »
2009-6-13 下午 - HTML/CSS/XML/XSL - HTML5 - IE
大家在写按钮(input、button)的时候会发现在 IE 下:
随着字数的增多,两边的间距也会越来越大。
在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿。
到底是什么原因呢?
蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案:
1、IE 在按钮的 value 值每增加 4 个字节(汉字为 2 个)时,就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮(XP 风格)默认样式是一个固定尺寸的圆角矩形图片作背景,所以一旦按钮变宽变高后,这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。
对于第二个问题我们暂时没办法去解决,除非 WIN 系统自己修复 BUG ,但对于第一个问题 ,我们还是可以修复的。
IE 下给按钮元素设置 overflow 属性的 visible 值(注 :padding 值仅在设置了over... 27 条评论 »
2008-11-12 下午 - HTML/CSS/XML/XSL - bug - button - IE
在浏览器 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 [...]
...
22 条评论 »
2008-11-6 下午 - JS/Ajax/AS/Flex - bug - href - IE
前言:对于 Hack 的使用,一直以来不提倡,应该尽可能的知道为什么,从根本上去解决问题,而不要遇到问题就 Hack,我们应该对代码“不作恶”,尽少使用,甚至不用。
对于 IE8 beta1 可以尝试下面的 Hack:
/*/ selector { … } /**/
此规则仅 IE8 beta1 识别,而其他 A-grade 浏览器都不识别。
不过这个 Hack 也许会在 IE 的 beta2 版本或正式版中被修复,暂可作为 IE8 beta1 调试之用。
...
14 条评论 »
2008-6-17 下午 - HTML/CSS/XML/XSL - hack - IE
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 目前已知的问题有:
当窗口大小改变的时候,页面内容可能会消失(作者改进中);
上一页/下一页功能不正常;
Focus功能不正常;
Java apple不能运行;
Flash... 18 条评论 »
2008-5-4 上午 - 前端常用工具 - 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 条评论 »
2008-4-28 下午 - 前端常用工具 - IE - 工具
IE 官方提供的 IE5 到 IE8 的 CSS 兼容列表:《CSS Compatibility and Internet Explorer》(小马 最新提供的信息)
很好的参考资料,可以方便帮助大家了解和熟悉各 IE 浏览器之间 CSS 的兼容情况。
个人最近一直对 MS 另眼相看,从 IE 8 Beta 1 发布的第一天起,至少我们看到 MS 的态度,积极开放,结果虽不太如人意,但至少 MS 跨出了重要的一步,放下了一向高傲的姿态 。
...
5 条评论 »
2008-3-27 上午 - HTML/CSS/XML/XSL - IE - 兼容
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 。
不支持的包括但不限于... 16 条评论 »
2008-3-6 下午 - HTML/CSS/XML/XSL - CSS - 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;
}
两个 box 被完全的定位,背景色为黄色的 box1 拥有 z-index 属性值 20,而背景色为绿色的 box2 拥... 5 条评论 »
2007-4-23 下午 - HTML/CSS/XML/XSL - bug - IE - z-index
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 被定义一个非 a... 3 条评论 »
2007-4-23 上午 - HTML/CSS/XML/XSL - IE - z-index