今天又被 IE 坑了，而且还是 IE10。
有一个页面用 frameset 嵌了两个页面，然后通过改变 frameset 的 cols 来调整布局。别的浏览器安好，但 IE10 却没任何的反应。不是报错，值也确实地改变了，但布局没发生变化，当浏览器窗口大小发生变化时才会触发布局变更。示例代码如下（也可直接查看 Demo）：
标签归档：ie
IE下获取链接相对路径的问题
<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
Submit 按钮在低版本 IE 下的黑边框
对于下面这段代码，当 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，那么采用在其外面包一层元素的方法来实现。
小心Dom元素的name属性
对于一个用 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:
trim for IE
因为 IE 不原生支持字符串的 trim 方法，所以，只能再特殊处理。
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+/, '').replace(/\s+$/, '');
};
}
不要在doctype前输出内容
在 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>
国情之IE
前些天观看过别人的一个项目，因为没多详细看，后台做得如何不清楚。不过就前端这方面来说，我觉得做得很烂。
首先，他们应该一开始就没有认真规划好，从得到的HTML源码来看，结构非常之混乱。先不说国内常见的table嵌套布局问题，为了达到行间间距的目的，他们甚至使用一个tr来实现。也许是我从来没用过table来实现布局的原因，我非常的无语。
另外，他们除了把样式直接coding在源文件中外，还很很多地方是直接使用HTML中定义的标签来实现样式控制而不是CSS代码。至于别的关于性能优化方面的问题就更不用说了。
不过，我倒是对他们使用table来布局表示理解，因为那个项目面向的是医院内部，面向的是一个IE6的世界。
继续阅读
Lingoes打败IE
首先看一张图：
ie-yahoo
请认真观察上图，右下方那个是Lingoes，其显示着“123”，Lucky，那正是密码框里的内容！
Oh，多好的一件事啊！以后要是忘记了密码，可以这样来取回密码。只是，你能别人也能而已！
OK，YaHoo可以，先看看别的网站如何？
qq邮箱可以
IE6作祟
很早以来，就看到过不少文章在声讨IE6，因为其的不标准性。近来更是风风火火的，不少知名网站都纷纷宣布停止对IE6的支持，不少开发者等还举行了IE6的葬礼等活动。
虽然我对其表示理解，但一直没有什么很大的感受。反而因为校园网特殊的环境和我机子本身的性能，我一直都是保留着IE6而没有进行升级。另一方面，我大多数情况下都不是用IE或基于IE核心的浏览器的，而是用Chrome和Firefox。所以，我对开发者们所说的需要维持2个标准的辛苦一直没有什么感触。
虽然，我依然不是开发者，不过，这个时候却对为什么那么多开发者急着将IE6送上“天堂”。一个简单的例子就是，我的这个博客在chrome和Firefox下显示完全正常，可是在IE6下右边的侧栏却给弄到了下面去，严重变形。这样子，如果，我说如果，我的博客有不少人来访问的话（基本有的话都是国内的了），以国内的浏览器使用份额来看，IE占绝大部分，而其中，由于XP的市场，IE6的市场又是最大的（即使不是使用IE6，但大多是IE核心的浏览器，因为大多数的用户对计算机都不是非常的了解，基本都是使用默认的浏览器或国内几大知名的基于IE核心的浏览器。），这样子，就会严重影响了别人的体验感和博客的观感。这是一个我的个人博客还好说，如果是商业性的网站，那问题就大了。
所以，现在无论在哪个领域，基本上都有一个标准（或书面或事实上的），这样子才有利于市场的推广。