文章標簽 ‘CSS’

IE下css的hack代碼

2011年8月31日 沒有評論

利用hack技術可以為不同的瀏覽器設置不同的值。例如代碼:

.test {
    margin-top:10px;	/*所有瀏覽器*/
    margin-top:5px\9;	/*所有IE瀏覽器*/
    *margin-top:0px;	/*IE6、7*/
    _margin-top:-10px;	/*IE6*/
}

css的順序很重要,后面的會覆蓋前面設置。。所以以上代碼在Firefox下margin-top的值為10px,IE8下可以識別第一條和第二條,但第二條會覆蓋第一條,故就變為5px,同理IE7下則為0px,IE6下為-10px。

綜上所述,符號[\9]所有IE瀏覽器可識別、[*]IE6、7 能識別、[_]只有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怎么中奖