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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
IE CSS Bug系列：不正確的浮動(dòng)伸縮Bug

影響的IE版本

在黔西等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶(hù)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需規(guī)劃網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)營(yíng)銷(xiāo)推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,黔西網(wǎng)站建設(shè)費(fèi)用合理。

這個(gè) bug 影響 IE7、IE6

表現(xiàn)

跟隨在其他浮動(dòng)元素之后的浮動(dòng)元素，設(shè)置clear屬性時(shí)不能正確伸縮

教程編寫(xiě)時(shí)間

2009.8.18 21:17:12

描述

這是我在 Gérard Talbot 收集整理的 IE7 Bug 頁(yè)面發(fā)現(xiàn)的bug之一（我大部分案例都是從那來(lái)的）。這個(gè)bug影響IE7跟IE6，表現(xiàn)就是設(shè)置了 clear 屬性的浮動(dòng)元素并不能正確地伸縮。我們來(lái)看一下：

演示

示例在這個(gè)獨(dú)立頁(yè)面

HTML代碼：

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.     Here is a <div> having float: left and clear: left. As expected, 
    3.   
  
  
  3.     it takes, it occupies as much width it requires from the body's content 
    4.   
  
  
  4.     area. 
    5.
 
  •   
  •  
  •     This is the same type of <div>: a left-floated <div> with 
  •     clear: left. This <div> should use, should take, should occupy 
  •     the whole content area of the body node (expected results). However, in 
  •     Internet Explorer 7, this left-floated <div> with clear: left only 
  •     takes, only occupies a very narrow chunk of the body's content area 
  •     (actual results). More text filling. More text filling. More text 
  •     filling. More text filling. More text filling. 
  •  
  •   
  •  
  •     Here, a third <div> having float: left and clear: left. Change 
  •     your browser window viewport's width. 
  •  
  •   
    •  
    •     
    •  
    •     Here is a <div> having float: left and clear: left. As expected, 
    •     it takes, it occupies as much width it requires from the body's content 
    •     area. 
    •     
      •  
    •   
    •     
    •  
    •         This is the same type of <div>: a left-floated <div> with 
    •         clear: left. This <div> should use, should take, should occupy 
    •         the whole content area of the body node (expected results). However, in 
    •         Internet Explorer 7, this left-floated <div> with clear: left only 
    •         takes, only occupies a very narrow chunk of the body's content area 
    •         (actual results). More text filling. More text filling. More text 
    •         filling. More text filling. More text filling. 
    •     
      •  
    •   
    •     
    •  
    •         Here, a third <div> having float: left and clear: left. Change 
    •         your browser window viewport's width. 
    •     
      •  
     

    • CSS 代碼：

     
 
 
        
  
  
    1. div, li { 
      2.   
  
  
    2.     background-color: #ddd; 
      3.   
  
  
    3.     border: 1px solid green; 
      4.   
  
  
    4.     clear: left; 
      5.   
  
  
    5.     color: black; 
      6.   
  
  
    6.     float: left; 
      7.   
  
  
    7. } 
      8.

    在IE6跟IE7中可以發(fā)現(xiàn)第二、第三個(gè)

  • 及
    不能正確地伸縮。它們被“截”短了，過(guò)早伸縮了。據(jù)Sjaak Prieste所說(shuō)（Gérard Talbot在這個(gè)bug中稱(chēng)贊了他），原因是這樣的，IE首先把該浮動(dòng)元素與上一個(gè)浮動(dòng)元素渲染在同一行中，然后發(fā)現(xiàn)’clear’屬性，清除浮動(dòng)將其移到下一行，但沒(méi)有重新排布文本。

    我的演示中既有

    也有
  • 的原因是，這兩種情況的處理方法有點(diǎn)區(qū)別。在“解決方案”中會(huì)有更多說(shuō)明。

    解決方案

    以下是上述bug的解決方法（以類(lèi)型排序）

    解決方法（對(duì)清除進(jìn)行標(biāo)記）

    該方法的時(shí)間

    Tue Aug 18 21:17:26 2009

    可修復(fù)的的版本

    所有受該bug影響的版本

    描述

    我找不到一個(gè)像樣的辦法，如果誰(shuí)有比較好的、相對(duì)簡(jiǎn)潔的辦法，請(qǐng)?jiān)u論給我！下面是我的方法：

    修復(fù)bug的演示在這個(gè)獨(dú)立頁(yè)面

    HTML Code：

     
 
 
        
  
  
    1.  
      2.   
  
  
    2.     Here is a <div> having float: left and clear: left. As expected, 
      3.   
  
  
    3.     it takes, it occupies as much width it requires from the body's content 
      4.   
  
  
    4.     area. 
      5.
    •  
  •  
  •  
  •     This is the same type of <div>: a left-floated <div> with 
  •     clear: left. This <div> should use, should take, should occupy 
  •     the whole content area of the body node (expected results). However, in 
  •     Internet Explorer 7, this left-floated <div> with clear: left only 
  •     takes, only occupies a very narrow chunk of the body's content area 
  •     (actual results). More text filling. More text filling. More text 
  •     filling. More text filling. More text filling. 
  •  
  •  
  •  
  •     Here, a third <div> having float: left and clear: left. Change 
  •     your browser window viewport's width. 
  •  
  •   
    •  
    •     
    •  
    •         
      Here is a <div> having float: left and clear: left. As expected, 
    •         it takes, it occupies as much width it requires from the body's content 
    •         area.
    •  
  •     
    •  
  •   
  •     
  •  
  •         
    This is the same type of <div>: a left-floated <div> with 
  •         clear: left. This <div> should use, should take, should occupy 
  •         the whole content area of the body node (expected results). However, in 
  •         Internet Explorer 7, this left-floated <div> with clear: left only 
  •         takes, only occupies a very narrow chunk of the body's content area 
  •         (actual results). More text filling. More text filling. More text 
  •         filling. More text filling. More text filling.
    •  
  •     
    •  
  •   
  •     
  •  
  •         
    Here, a third <div> having float: left and clear: left. Change 
  •         your browser window viewport's width.
    •  
  •     
    •  
  •  

    • CSS Code：

     
 
 
        
  
  
    1. div { 
      2.   
  
  
    2.     background-color: #ddd; 
      3.   
  
  
    3.     border: 1px solid green; 
      4.   
  
  
    4.     clear: left; 
      5.   
  
  
    5.     color: black; 
      6.   
  
  
    6.     float: left; 
      7.   
  
  
    7. } 
      8.   
  
  
    8. .ie_fix { display: inline-block; } 
      9.   
  
  
    9. .ie_fix { display: block; } 
      10.

    看下這邊我做的事。在示例中的div部分，我在各div之間插入一個(gè)額外的元素，并且通過(guò) {display: inline-block;}給它一個(gè)”布局”(layout),然后設(shè)置其display屬性為block。

    因?yàn)?li>元素之間插入元素不大合適，在示例的