日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
IECSSBug系列：高度額外擴(kuò)展的Bug

受影響版本

吳忠網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,吳忠網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為吳忠成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的吳忠做網(wǎng)站的公司定做！

這支bug影響IE6

表現(xiàn)

元素比指定的高度長(zhǎng)（主要適用于小的高度）

教程發(fā)布時(shí)間

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

問(wèn)題描述

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

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

HTML Code：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. Lorem
 

CSS Code：

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     height: 3px; 
    3. 
  
  
  
  
  3.     background: #dd0; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.   
    6. 
  
  
  
  
  6. #text { margin: 10px 0; } /* irrelevant to the bug */ 
    7.

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

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

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

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

解決方案

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

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

方案提出時(shí)間

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

修訂版本

全部受影響的版本

方案描述

這個(gè)修補(bǔ)方法非常簡(jiǎn)潔明了，我們將會(huì)用到overflow屬性去修補(bǔ)IE的溢出問(wèn)題，下面就是經(jīng)過(guò)我們修補(bǔ)的之后的demo

HTML Code：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. Lorem
 

CSS Code：

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     height: 3px; 
    3. 
  
  
  
  
  3.     background: #dd0; 
    4. 
  
  
  
  
  4.     overflow: hidden; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. #text { margin: 10px 0; } /* irrelevant to the bug */ 
    7.

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

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

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

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

方案提出時(shí)間

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

修訂版本

全部受影響

方案描述

在這個(gè)解決方案里，我們將給font-size屬性賦值為0。從個(gè)人角度來(lái)說(shuō)我更建議你們使用另外一個(gè)“清除”解決方案，因?yàn)橛幸恍┯脩艨赡軙?huì)禁用 頁(yè)面里字體指定的功能（查看瀏覽器菜單欄里的 Tool(工具) -> Internet Options(Internet設(shè)置) -> General(常規(guī)) -> Accessibility(可訪問(wèn)性) -> Ignore font sizes(忽視字體大小)）。下面就是經(jīng)過(guò)我們修補(bǔ)的之后的demo

HTML Code:

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. Lorem
 

CSS Code：

 
 
 
 
    
  
  
  
  
  1. div { 
    2. 
  
  
  
  
  2.     height: 3px; 
    3. 
  
  
  
  
  3.     background: #dd0; 
    4. 
  
  
  
  
  4.     font-size: 0; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. #text { margin: 10px 0; } /* irrelevant to the bug */ 
    7.

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

我再一次推薦你使用另外一個(gè)解決方案，使用overflow: hidden解決問(wèn)題，因?yàn)橛脩艉芸赡芫驼娴脑跒g覽器里禁用調(diào)整字體大小，到那時(shí)你所做的一切兼容都功虧一簣了。

清除解決方案的副作用

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


當(dāng)前標(biāo)題：IECSSBug系列：高度額外擴(kuò)展的Bug
網(wǎng)頁(yè)鏈接：http://www.dlmjj.cn/article/ccisoce.html