IE把name也归入hash索引

一般地,我们在对应元素处加上个 id ,然后 url 中使用 #id 这样的 hash 来达到直接跳转到对应元素的目的。

但在 ie 中,可能会存在一些问题,因为 ie 会把 form 表单的 name 属性也纳入页内跳转的查找范围。这样,如果存在着 name 值和别的元素的 id 的值相同,那么可能将会跳转到对应 name 属性的 form 元素上而不是用 id 指定的元素。

至于,最终跳转到哪个,则看哪个的位置更前。

innerHTML设置样式在IE下的问题

使用 innerHTML 设置内容时,如果内含 style 样式,在 IE7 及以下可能会发现样式没生效。

解决方法:把 <style> 样式放到待设置的 html 内容的最后。

所使用的代码片段是:

1
2
3
var str1 = '<style>#con{color:red;}</style><p>红字</p>',
    str2 = '<p>二:<style>#con{color:green;}</style>绿字</p>',
    str3 = '<p>蓝字</p><style>#con{color:blue;}</style>';

关于图片宽高 – 如果爱,请深爱

有如下代码:

1
<img src="http://placehold.it/300" height="" />

其在 IE 下的解析将会是:

图片有height属性但无值在IE下的解析结果

可以看到,写了 height 属性,但没写值时,IE 下会把其当作 1,而 Chrome 等则会忽视该属性,从而导致了 Chrome 等下是原图大小,而 IE 下则看不到图片。

如果爱,请深爱;如果写,请不空。

P.S. 像这种情况,可能极少遇到,但种种原因,我遇到了,故记录之。

input file 在不同浏览器中的呈现

文件选择(input type=”file”)是一个常用的元素(虽然我比较少用),在浏览器中的表现是没有完全一致的。以下是其在 IE/Firefox/Chrome/Opera 四种浏览器中的一些异同(Safari 和 Chrome 同是基于 Webkit,故不再详说)。

对于文件选择元素,可以分为2部分,一部分是按钮,一部分是文字展示,如图1:

图1:input file 的组成

下面图2~图5是4个浏览器对于3个不同状态下的文件选择元素的呈现:

其中:第一个是默认状态下选择了一个文件;第二个是设定了 300px 的宽度;第三个设定了 50px 的宽度;

继续阅读“input file 在不同浏览器中的呈现”