DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> IE6/7下多種方法移除button、input 默認邊框和去掉焦點線
IE6/7下多種方法移除button、input 默認邊框和去掉焦點線
編輯:布局實例     

button、input 默認邊框和焦點線確實影響美觀,下面為大家講解下IE6/7下下如何去掉邊框、焦點線,具體的實現如下,感興趣的朋友可以參考下

 

一、去掉邊框:

看看基本的HTML:

復制代碼 代碼如下:
<div class="wrap">
<input type="text" class="input_txt">
<input type="submit" value="submit" class="input_btn">
<input type="button" value="提交" class="input_btn">
<div>


通常解決這樣的bug最好的方法就是在button和input的標簽外添加一個標簽,然後將樣式寫在這個標簽上,並且把button和input的默認樣式都去除掉。

實現方式一:設置CSS:

復制代碼 代碼如下:
<style type="text/css">
input{margin:0;padding:0;}
.wrap{background-color:#0f0;}
.input_txt,.input_btn{border:0 none;}
</style>


實現方式二:設置CSS,並使用濾鏡:

復制代碼 代碼如下:
<!--[if IE]>
<style type="text/css">
input{margin:0;padding:0;filter:chroma(color=#000000);border:none; }
.wrap{background-color:#0f0;}
</style>
<![endif]-->


此種方式貌似會有點問題!待在真實IE7環境中驗證。

二、去掉焦點線:

復制代碼 代碼如下:
<style type="text/css">
a:focus, *:focus {noFocusLine: expression(this.onFocus=this.blur());}
</style>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved