解決IE6下DIV無法實現1px高度問題
本文和大家重點討論一下IE6.0下DIV不能實現1px高度的幾種解決方法,高度為1px的DIV在IE6里不管用,因為IE6中的DIV默認有個最小字體高度,DIV的最小高度就是這個高度,即使設置了height:1px,DIV顯示出來的高度也不是1像素。
IE6.0下DIV不能實現1px高度的幾種解決方法
在設計網頁時,有時我們需要一個1px高度的細線,但IE6有個bug,高度為1px的DIV在IE6里不管用。這是因為IE6中的DIV默認有個最小字體高度,DIV的最小高度就是這個高度,即使設置了height:1px,DIV顯示出來的高度也不是1像素。
解決方法有如下幾種:
◆1,網上都說多加一個font-size=0px;的屬性可以實現.
以下為引用的內容:
- <styletypestyletype="text/css">
- .a{
- font-size:0px;
- height:1px;
- background-color:red;
- }
- </style>
- <DIVclassDIVclass="a"></DIV>
但經過我的測試,細是細了,但不是1px,有點像是2px.不知道是我的瀏覽器問題,還是別的原因.你們可以用這個方法再測試一下.
◆2.多加一個line-height:1px的屬性,不過得在DIV里多加一個 ,也就是空格,以下為引用的內容:
- <styletypestyletype="text/css">
- .a{
- width:200px;
- height:1px;line-height:1px;
- background:red;
- }
- </style>
- <DIVclassDIVclass="a"> </DIV>
這個方法我測試通過.很好用.如果你要做指定長度的細線,這個方法是個不錯的選擇.如果你的細線DIV長度是他父對象的長度的話,你可以用下面這個更簡單的方法:
◆3,用border-top:1pxsolid#ff0000邊框的方法制作一個細線.
以下為引用的內容:
- <styletypestyletype="text/css">
- .a{
- border-top:1pxsolid#ff0000;
- }
- </style>
- <DIVclassDIVclass="a"></DIV>
注意:這個方法不能加width寬這個屬性. 加了以后他會有高度(雖然表面上看不到,他是透明的)要是你這個細線下面再有DIV的話,他的高度就看出來了.再多加上一個font-size:1px;可以解決這個問題.
【編輯推薦】
- JavaScript巧解IE6至IE8兼容問題
- 使用JavaScript輕松區別IE6、IE7、IE8
- 剖析Margin和Padding屬性中四個值的先后順序及區別
- 九步輕松解決IE6的各種疑難雜癥
- 技術前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題