文章標簽 ‘IE6’

javascript下動態創建IMG時IE6兩次請求指定資源

2011年8月19日 沒有評論

眾所周知js可以通過document.createElement方法創建DOM對象,并可以把增加到頁面上,今天碰到一個怪異的事情,使用如下代碼動態創建一個Img

function req() {
	var el = document.createElement('IMG');
	el.src = '資源的WEB地址';                 //line 3
	document.body.appendChild(el);          //line 4
}

在某種特定的調用req方法時,發現在IE6會有兩次請求“資源的WEB地址”,其他瀏覽器都是正常,真是萬惡的IE6啊。由于req方法是另一個函數調用的,以后是多次觸發了req方法,經過多方的debug,發生確實只調用了一次req,所以產生問題的原因就是在req方法的內部,對于這么簡單的代碼,唯一可以修改的地方把第3、4行代碼換一下位置,調整后,發現IE6正常了,只請求一次了,測試其他瀏覽器也是正常,唉,再次BS一下IE6。

 

分類: web前端 標簽: , ,

兼容各個瀏覽器的右下角提示框代碼

2011年8月12日 沒有評論

現在很多網站都喜歡在右下角出現一個信息提示框,當然有些廣告也這么做,不管頁面怎么滾動,提示框的位置始終位于右下角,查看效果,對于非IE6的瀏覽器,問題很簡單,只要在css中設置position為fixed即可,但IE6不支持fixed屬性。解決這個問題的方法大部分使用javascript來做,監聽頁面滾動的事件,然后實時計算出提示框的top值并把此值賦給提示框。本文要講的是js的另一種用法,直接在css中通過eval來執行js,具體參看下面示例代碼。另外同時用到了css hack技術,在css的屬性前加符號“_”話,只有IE6才能識別并應該。注意 css 中 *html的代碼解決滾動時候提示框閃動的問題。

本人認為此文最大的價值是明白了javascript代碼也能隱藏在css中執行,不得不說腳本真是太強大~~~

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
    #top{
        border:1px solid blue;
		background:#ccc;
        width:200px;
		height:150px;
        position:fixed;
        _position:absolute;
        bottom:0;
        right:0;
		_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    }

    *html{
        background-image:url(about:blank);
        background-attachment:fixed;
    }
</style>
</head>
<body >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="top">
	測試效果
</div>
</body>
</html>

本人參考借鑒 http://loo2k.com/ie6-position-fixed/ 中的知識

分類: web前端 標簽: , , ,

無覓相關文章插件,快速提升流量

30选5怎么中奖