IE10 对 frameset 的支持存在问题

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

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

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

IE下获取链接相对路径的问题

1
<a href="about.html" id="anc">a link with href="about.html"</a>
1
2
3
4
var anchor = document.getElementById('anc');

console.log(anchor.href);
console.log(anchor.getAttribute('href'));

以上代码,对于第一个 log,希望得到形如 http://liunian.info/about.html 的绝对路径,对于第二个 log,希望得到 about.html 这个相对路径。

但在 ie 下,第二个却也由相对路径变为绝对路径了。

兼容的处理方法是使用第二个参数,这个参数是 IE 私有的,但由于 JavaScript 的语言特性,多参数并不会导致出错,所以,对于 Chrome、FF 等将仍是原来的方法。

1
anchor.getAttribute('href', 2);

References

  1. getAttribute(“HREF”) is always absolute
  2. 获得原始href属性的方法
  3. getAttribute method

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

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

1
2
3
4
5
6
7
8
<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 属性是有些特殊的,用来标志提交的数据,跟平常的用途有些不一样。

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属性”

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

Lingoes打败IE

首先看一张图:

ie-yahoo

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

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

OK,YaHoo可以,先看看别的网站如何?

qq邮箱可以

继续阅读“Lingoes打败IE”

IE6作祟

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

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

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

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