今天又被 IE 坑了,而且还是 IE10。
有一个页面用 frameset 嵌了两个页面,然后通过改变 frameset 的 cols 来调整布局。别的浏览器安好,但 IE10 却没任何的反应。不是报错,值也确实地改变了,但布局没发生变化,当浏览器窗口大小发生变化时才会触发布局变更。示例代码如下(也可直接查看 Demo):
<a href="about.html" id="anc">a link with href="about.html"</a>
var anchor = document.getElementById('anc');
console.log(anchor.href);
console.log(anchor.getAttribute('href'));
以上代码,对于第一个 log,希望得到形如 //liunian.info/about.html
的绝对路径,对于第二个 log,希望得到 about.html 这个相对路径。
但在 ie 下,第二个却也由相对路径变为绝对路径了。
兼容的处理方法是使用第二个参数,这个参数是 IE 私有的,但由于 JavaScript 的语言特性,多参数并不会导致出错,所以,对于 Chrome、FF 等将仍是原来的方法。
anchor.getAttribute('href', 2);
References
对于下面这段代码,当 focus 表单(如输入框)时,提交按钮在 IE 6/7 中将会出现一个黑色边框。
<style>
input{border:1px solid red;}
</style>
<form>
<input type="text" value="" />
<input type="submit" value="submit" />
</form>
如果需要对按钮做美化,保持各浏览器一致(比如设定背景和border等),那么需要处理这个问题。
解决方法是:把 submit 按钮的 border 设为 none,然后如果需要 border,那么采用在其外面包一层元素的方法来实现。
对于一个用 JavaScript 获取到一个 DOM 节点的后,在说到属性的时候需要注意的是指 DOM 节点的属性还是 JavaScript 对象的属性(或说字段名)。一般来说,前者用 getAttribute/setAttribute 来访问/修改,后者用 object.field 来访问。然而,对于像 id、className 这些却属于 DOM 节点的 Attribute 范围。在说到 name 属性的时候,就更加复杂一点了,因为牵涉到 IE 的特殊处理。
当想用 setAttribute 给一个已有的(或动态创建的) DOM 元素设置 name 属性时,将会发现 IE6/7 跟 form 及相关表单元素合不来,根本就没有设置成功。
据微软的文档,在 IE6/7 中,form 表单时的 name 属性是有些特殊的,用来标志提交的数据,跟平常的用途有些不一样。
var createNamedElement = function (type, name) {
var element = null;
// Try the IE way; this fails on standards-compliant browsers
try {
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {
}
if (!element || element.nodeName != type.toUpperCase()) {
// Non-IE browser; use canonical method to create named element
element = document.createElement(type);
element.name = name;
}
return element;
};
// create an input element with name
var aInput = createNamedElement('input', 'aInp');
如果只是需要创建一个节点而不需要后续引用继续修改的话,我会更加倾向于直接用 innerHTML 来创建,比如:
someNode.innerHTML = someNode.innerHTML + '<input type="button" name="aButton" value="This is a button" />';
需要注意的是,对于 name 属性,在表单类中 attribute 和 field 是相同的,但在非表单中, attribute 中的才是 HTML 代码中可见的 name 属性。
References:
因为 IE 不原生支持字符串的 trim 方法,所以,只能再特殊处理。
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+/, '').replace(/\s+$/, '');
};
}
在 doctype 前输出如注释等非空白内容会导致 IE6/8 的页面异常,比如用 margin 来设置的居中。以下代码,IE6 ~ IE8 将无法居中显示。
<!-- Some comment here will make ie6~8 abnormal -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>content_before_dotype</title>
<style type="text/css" media="screen">
#wrap{
margin:0 auto;
width:800px;
height:600px;
background:#ccc;
}
</style>
</head>
<body>
<div id="wrap">
在doctype前输出内容(非空白符)将导致IE页面布局异常,比如用margin来实现的居中。
</div>
</body>
</html>
前些天观看过别人的一个项目,因为没多详细看,后台做得如何不清楚。不过就前端这方面来说,我觉得做得很烂。
首先,他们应该一开始就没有认真规划好,从得到的HTML源码来看,结构非常之混乱。先不说国内常见的table嵌套布局问题,为了达到行间间距的目的,他们甚至使用一个tr来实现。也许是我从来没用过table来实现布局的原因,我非常的无语。
另外,他们除了把样式直接coding在源文件中外,还很很多地方是直接使用HTML中定义的标签来实现样式控制而不是CSS代码。至于别的关于性能优化方面的问题就更不用说了。
不过,我倒是对他们使用table来布局表示理解,因为那个项目面向的是医院内部,面向的是一个IE6的世界。
继续阅读
首先看一张图:
ie-yahoo
请认真观察上图,右下方那个是Lingoes,其显示着“123”,Lucky,那正是密码框里的内容!
Oh,多好的一件事啊!以后要是忘记了密码,可以这样来取回密码。只是,你能别人也能而已!
OK,YaHoo可以,先看看别的网站如何?
qq邮箱可以
很早以来,就看到过不少文章在声讨IE6,因为其的不标准性。近来更是风风火火的,不少知名网站都纷纷宣布停止对IE6的支持,不少开发者等还举行了IE6的葬礼等活动。
虽然我对其表示理解,但一直没有什么很大的感受。反而因为校园网特殊的环境和我机子本身的性能,我一直都是保留着IE6而没有进行升级。另一方面,我大多数情况下都不是用IE或基于IE核心的浏览器的,而是用Chrome和Firefox。所以,我对开发者们所说的需要维持2个标准的辛苦一直没有什么感触。
虽然,我依然不是开发者,不过,这个时候却对为什么那么多开发者急着将IE6送上“天堂”。一个简单的例子就是,我的这个博客在chrome和Firefox下显示完全正常,可是在IE6下右边的侧栏却给弄到了下面去,严重变形。这样子,如果,我说如果,我的博客有不少人来访问的话(基本有的话都是国内的了),以国内的浏览器使用份额来看,IE占绝大部分,而其中,由于XP的市场,IE6的市场又是最大的(即使不是使用IE6,但大多是IE核心的浏览器,因为大多数的用户对计算机都不是非常的了解,基本都是使用默认的浏览器或国内几大知名的基于IE核心的浏览器。),这样子,就会严重影响了别人的体验感和博客的观感。这是一个我的个人博客还好说,如果是商业性的网站,那问题就大了。
所以,现在无论在哪个领域,基本上都有一个标准(或书面或事实上的),这样子才有利于市场的推广。