DIVCSS實(shí)例教程：去除鏈接元素的虛線框(兼容IE7、IE6、FF)_瀏覽器兼容教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      
　　
      　　DIVCSS實(shí)例教程：去除鏈接元素的虛線框 （兼容IE7、IE6、FF）

      　　Web的發(fā)展非常迅速，UI設(shè)計(jì)也越來越美觀，漂亮。同時(shí)也給WEB前端編碼提出了新的要求。鏈接元素在點(diǎn)擊時(shí)會(huì)出現(xiàn)虛線框，由于種種原因，您的主管可能要求你想辦法將鏈接虛線邊框出除。

      　　鏈接元素虛線框如處圖所示：

      

      

      　　我們采用htc文件的辦法來解決這個(gè)問題。首頁將以下代碼保存為link.htc文件。

      

      

       示例代碼 [www.wf0088.com]
      

      <public:attach event="onfocus" onevent="hscfsy()"/>
      <script language="javascript">
      function hscfsy(){
      this.blur();
      }
      </script>
      

      

      　　在HTML文件中寫入以下代碼，建立一個(gè)鏈接：

      

      

       示例代碼 [www.wf0088.com]
      

      <a href="#" title="模板無憂">mb5u.com</a>
      

      

      　　我們開始為此鏈接定義CSS樣式：

      

      

       示例代碼 [www.wf0088.com]
      

      a { 
      　　display:block; 
      　　width:100px; 
      　　height:30px; 
      　　line-height:30px; 
      　　text-align:center; 
      }
      a:hover { 
      　　background:#ddd;
      }
      

      

      　　CSS樣式確定了鏈接的外觀，具有一定寬度與高度的塊元素。文字水平左右均居中對齊。
      　　我們在a標(biāo)簽的樣式內(nèi)，加入一條屬性。用此消除鏈接的虛線邊框：

      

      

       示例代碼 [www.wf0088.com]
      

      a { 
      　　display:block; 
      　　width:100px; 
      　　height:30px; 
      　　line-height:30px; 
      　　text-align:center; 
      　　behavior:url(line.htc);
      }
      

      

      　　我們運(yùn)行以下代碼查看效果：
      

      

      div css xhtml xml 代碼調(diào)試框 代碼調(diào)試框 [www.wf0088.com]
      


        [ 可先修改部分代碼 再運(yùn)行查看效果 ]
      

      

      　　我們在IE7、IE6中預(yù)覽，已經(jīng)沒有問題了。但是在FF中虛線框依然存在。
      　　我們新增一條樣式定義來解決此問題。

      

      

       示例代碼 [www.wf0088.com]
      

      　　a:focus { outline:0; }
      

      



      　　查看最終的運(yùn)行效果：

      

      

      div css xhtml xml 代碼調(diào)試框 代碼調(diào)試框 [www.wf0088.com]
      


        [ 可先修改部分代碼 再運(yùn)行查看效果 ]
      

      

      　　在IE7、IE6、FF中均成功實(shí)現(xiàn)了消除鏈接的虛線框。
      　　


      

      



      


      /所屬分類：瀏覽器兼容教程/更新時(shí)間：2008-06-04


      

      



      


      



      相關(guān)瀏覽器兼容教程：