用css實現一個空心圓,並始終放置在瀏覽器窗口左下角


用css實現一個空心圓,並始終放置在瀏覽器窗口左下角
        div{
                position:fixed;
                bottom:0;
                left:0;
                width:100px;
                height:100px;
                border:2px solid #000;
                border-radius:100px;
}
        如何讓圓水平,垂直居中
        div{
                position:fixed;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                width:100px;
                height:100px;
                border:2px solid #000;
                border-radius:100px;
}
IE7以下不支持position:fixed;的bug

1. 利用 Javascript 計算出需要的 top 值
<!--[if IE lt 7]>
<link rel="stylesheet" href="style.css" type="text/css" />
<![endif]-->
在style.css樣式表中針對目標定位元素樣式中寫入:
position:absolute;
top:expression(eval(document.body.scrollTop + 50));
防止滾動條滾動時的閃動,需要定義HTMl的屬性為:
html {
    background-image: url(about: blank); /*用瀏覽器空白頁面作為背景*/
    background-attachment: fixed; /*確保滾動條滾動時,元素不閃動*/
}
在 IE 中特有的 CSS 運算符 expression中我們可以利用 Javascript 計算出需要的 top 值,這樣就達到了與 position: fixed 同樣的效果。
2.利用容器對溢出內容的處理方式來實現
定義body內外邊距為0,實現html和瀏覽器窗口相同大小,使body出現滾動條,元素相對於html相對定位。
body { padding: 0; margin: 0; }
html { overflow: hidden; }
body { height: 100%; overflow: auto; }
針對IE6定義元素屬性:
position: absolute;
top: 50% ;
left: 50% ;
margin-top: -140px;
margin-left: -168px;
讓元素固定於瀏覽器
分別讓元素定位於瀏覽器左側、右側、頂部、底部綜合樣式演示:
position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));/* IE6 頭部固定 */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)0)-(parseInt(this.currentStyle.marginRight, 10)0));/* IE6 固定右側 */

position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)0)-(parseInt(this.currentStyle.marginBottom, 10)0)));/* IE6 固定底部  */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft));/* IE6 左側固定 */


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM