IE CSS Bug系列中高度額外擴展的Bug分析

本篇內(nèi)容主要講解“IE CSS Bug系列中高度額外擴展的Bug分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“IE CSS Bug系列中高度額外擴展的Bug分析”吧!

受影響版本

這支bug影響IE6

表現(xiàn)

元素比指定的高度長（主要適用于小的高度）

教程發(fā)布時間

2009年7月17日 星期五 09:58:19

問題描述

盡管這些bug出現(xiàn)在頁面上不是很符合語義，然而那些經(jīng)驗最豐富的開發(fā)者們遲早有一天也可能會遇到這個bug，它讓IE盒模型在解析的時候，在元素上面生成了一個非常小的高度值。

當你向這個元素里添加一些文本的時候，這個bug就表現(xiàn)得很明顯了。下面這個示例可以讓你更容易理解

HTML Code：

<div></div> <div id="text">Lorem</div>

CSS Code：

div {     height: 3px;     background: #dd0; }   #text { margin: 10px 0; } /* irrelevant to the bug */

首先，我想提醒你注意一下，background和margin屬性跟這個bug無關(guān)，我寫上它們僅僅是為了讓你能夠更輕松地把代碼呈現(xiàn)樣式與demo的樣式聯(lián)系得更緊密一些。

這個demo呈現(xiàn)了兩個3像素高的線，實際上它們不過是div標簽。其中一個里面包含著單詞“Lorem”，在任何一個自作聰明的瀏覽器（IE7以下）里，這個單詞都會溢出到第二個div里，所以在IE7里，這個div的高度就會保持3像素。

當你在低于IE7的版本里看上述demo的時候，會產(chǎn)生一些意想不到的糟糕問題，我們的兩個div都比3像素還要高一些。到底發(fā)生什么了呢？讓我們 看一下包含單詞“Lorem”的div，你應該能注意到這個div擴大了一些以容納這個單詞，你也會注意到?jīng)]有任何文本的那個div也擴展了相同的高度。

這個bug現(xiàn)在更有說得通了，即使在空的元素里，IE也會有至少一個空間。由于打破了盒模型產(chǎn)生的那個空間，使得我們的div擴展了而不是讓這個空 間溢出到div外。讓我們假設(shè)那個空間受font屬性的控制?，F(xiàn)在，聰明的你已經(jīng)作好準備，在聽到overflow和font嘗試做點兒事情。

解決方案

以下是上述bug的解決方法（以類型排序）

“清除”解決方案- 有副作用

方案提出時間

2009年年7月17日10:05:25

修訂版本

全部受影響的版本

方案描述

這個修補方法非常簡潔明了，我們將會用到overflow屬性去修補IE的溢出問題，下面就是經(jīng)過我們修補的之后的demo

HTML Code：

<div></div> <div id="text">Lorem</div>

CSS Code：

div {     height: 3px;     background: #dd0;     overflow: hidden; } #text { margin: 10px 0; } /* irrelevant to the bug */

我們?yōu)閐iv加上overflow: hidden的樣式，來解決高度擴展bug。實際上，在添加overflow屬性的地方，原先在那些聰明過頭的瀏覽器（IE6-）里的空間位置現(xiàn)在被隱藏了。

“清除”解決方案的副作用

這個解決方案的副作用是所有溢出的元素都會被隱藏，可能有些你想要的元素也會被隱藏

“清除”解決方案 – 有副作用

方案提出時間

2009年7月17日 星期五 10:11:15

修訂版本

全部受影響

方案描述

在這個解決方案里，我們將給font-size屬性賦值為0。從個人角度來說我更建議你們使用另外一個“清除”解決方案，因為有一些用戶可能會禁用 頁面里字體指定的功能（查看瀏覽器菜單欄里的 Tool(工具) -> Internet Options(Internet設(shè)置) ->  General(常規(guī)) -> Accessibility(可訪問性) -> Ignore font  sizes(忽視字體大小)）。下面就是經(jīng)過我們修補的之后的demo

HTML Code:

<div></div> <div id="text">Lorem</div>

CSS Code：

div {     height: 3px;     background: #dd0;     font-size: 0; } #text { margin: 10px 0; } /* irrelevant to the bug */

無需多言，如果你讀懂了產(chǎn)生這個bug的原因，一切問題你都迎刃而解，設(shè)置font-size為0，我們認為使這個空間和文本小到不會產(chǎn)生任何溢出。

我再一次推薦你使用另外一個解決方案，使用overflow: hidden解決問題，因為用戶很可能就真的在瀏覽器里禁用調(diào)整字體大小，到那時你所做的一切兼容都功虧一簣了。

清除解決方案的副作用

這個解決方案的副作用是所有溢出的元素都會被隱藏，可能有些你想要的元素也會被隱藏

到此，相信大家對“IE CSS Bug系列中高度額外擴展的Bug分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！