ie – 小居

IE10 对 frameset 的支持存在问题

今天又被 IE 坑了，而且还是 IE10。

有一个页面用 frameset 嵌了两个页面，然后通过改变 frameset 的 cols 来调整布局。别的浏览器安好，但 IE10 却没任何的反应。不是报错，值也确实地改变了，但布局没发生变化，当浏览器窗口大小发生变化时才会触发布局变更。示例代码如下（也可直接查看 Demo）：

继续阅读“IE10 对 frameset 的支持存在问题”

Submit 按钮在低版本 IE 下的黑边框

对于下面这段代码，当 focus 表单（如输入框）时，提交按钮在 IE 6/7 中将会出现一个黑色边框。

1
2
3
4
5
6
7
8

如果需要对按钮做美化，保持各浏览器一致（比如设定背景和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 属性是有些特殊的，用来标志提交的数据，跟平常的用途有些不一样。

When you submit a form, use the name property to bind the value of the control. The name is not the value displayed for the input type=button, input type=reset, and input type=submit input types. The internally stored value is submitted with the form, not the displayed value.

综合标准的做法，可以得到这样一个创建带 name 属性的 DOM 节点的代码：继续阅读“小心Dom元素的name属性”

trim for IE

因为 IE 不原生支持字符串的 trim 方法，所以，只能再特殊处理。

1
2
3
4
5

if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+/, '').replace(/\s+$/, '');
};
}

不要在doctype前输出内容

在 doctype 前输出如注释等非空白内容会导致 IE6/8 的页面异常，比如用 margin 来设置的居中。以下代码，IE6 ~ IE8 将无法居中显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!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的世界。
继续阅读“国情之IE”

Lingoes打败IE

首先看一张图：

请认真观察上图，右下方那个是Lingoes，其显示着“123”，Lucky，那正是密码框里的内容！

Oh，多好的一件事啊！以后要是忘记了密码，可以这样来取回密码。只是，你能别人也能而已！

OK，YaHoo可以，先看看别的网站如何？

继续阅读“Lingoes打败IE”

IE6作祟

很早以来，就看到过不少文章在声讨IE6，因为其的不标准性。近来更是风风火火的，不少知名网站都纷纷宣布停止对IE6的支持，不少开发者等还举行了IE6的葬礼等活动。

虽然我对其表示理解，但一直没有什么很大的感受。反而因为校园网特殊的环境和我机子本身的性能，我一直都是保留着IE6而没有进行升级。另一方面，我大多数情况下都不是用IE或基于IE核心的浏览器的，而是用Chrome和Firefox。所以，我对开发者们所说的需要维持2个标准的辛苦一直没有什么感触。

虽然，我依然不是开发者，不过，这个时候却对为什么那么多开发者急着将IE6送上“天堂”。一个简单的例子就是，我的这个博客在chrome和Firefox下显示完全正常，可是在IE6下右边的侧栏却给弄到了下面去，严重变形。这样子，如果，我说如果，我的博客有不少人来访问的话（基本有的话都是国内的了），以国内的浏览器使用份额来看，IE占绝大部分，而其中，由于XP的市场，IE6的市场又是最大的（即使不是使用IE6，但大多是IE核心的浏览器，因为大多数的用户对计算机都不是非常的了解，基本都是使用默认的浏览器或国内几大知名的基于IE核心的浏览器。），这样子，就会严重影响了别人的体验感和博客的观感。这是一个我的个人博客还好说，如果是商业性的网站，那问题就大了。

所以，现在无论在哪个领域，基本上都有一个标准（或书面或事实上的），这样子才有利于市场的推广。

标签：ie