跨瀏覽器的CSS固定定位_CSS教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      本文介紹了跨瀏覽器的CSS固定定位,請看下面的例子:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      ……
      <style type="text/css">
      #fixed{position:fixed;top:5em;right:0;……} /*針對IE7、Opera、Firefox一行搞定*/
      </style>
      /*IE6中利用容器對溢出內容的處理方式來實現的*/
      <!–[if IE 6]>
      <style type="text/css">
      html{overflow:hidden;}
      body{height:100%;overflow:auto;}
      #fixed{position:absolute;right:17px;}
      /*fixed元素的絕對位置是相對于HTML元素來說,滾動條是body元素的,這是設置right:17px的原因*/
      </style>
      <![endif]–>
      <!–[if lt IE 6]>
      <style type="text/css">
      #fixed{position:absolute;top:expression(eval(document.body.scrollTop 50));}
      </style>
      <![endif]–>
      </head>
      <body>
      <div id="wrapper">
      ……
      </div>
      <div id="fixed"><h2>{position:fixed}</h2></div>
      </body>
      </html>

      來源:模板無憂//所屬分類:CSS教程/更新時間:2008-01-08
      相關CSS教程