8.固定式頁面腳
在網頁裡添加固定的頁尾其實非常簡單,並且也很實用。有些網站的頁尾設計得很漂亮,可以給網站呈現出一個完美的結尾。
#footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background: #444;
}
/* IE 6 */* html #footer {
position: absolute;
top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
9.IE 6下修複PNG格式的透明度
在網站裡使用透明的映像已成為一種很普遍的做法,其始於.gif圖片格式,但現在也涉及到.png圖片格式。而一些老版本的IE不支援透明度,下面這段代碼會很好地解決這一問題。
.bg {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}
/* 1px gif method */img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
10.跨瀏覽器設定最小高度
有時開發人員需要對HTML元素設定最小高度,然而,這個效果卻無法相容IE和老版本的Firefox,下面這段代碼可以修複這個問題。
#container {
min-height: 550px;
height: auto !important;
height: 550px;
}