IE8的CSS與浮點數和寬度容器的問題

我遇到了什麼似乎是與IE8的CSS問題。IE8的CSS與浮點數和寬度容器的問題

<html> 
    <body> 
     <div style="width:180px;"> 
     <div style="text-align:center; border:1px solid black;"> 
      <div style="width: 40%; background-color:red;"> 
      <div style="width:180px; float:left;"> 
       <div>Text</div> 
      </div> 
      <div style="clear: both"></div> 
      </div> 
     </div> 
     </div> 
    </body> 
    </html>

這給了我下面的結果：

enter image description here

的文檔類型設置爲嚴格。文本div的原因是div的寬度可以在0-100％之間，這個寬度是div的合適高度。

爲了達到IE8的第一個效果，我需要做些什麼？

對此的一些關鍵元素是高度不能被固定，因爲文本可能會溢出盒子的寬度。包含盒子和「填充」的高度需要能夠根據內容而變化。

來源

2012-01-10 Ryan Elkins

我剛纔檢查你的代碼在Firefox和IE8，它似乎顯示相同的方式。另外當我改變寬度時，它同時適用於Firefox和IE8。你使用IE8或IE測試儀？ – Alex 2012-01-10 09:43:58

您可能會更有興趣詢問您想要達到的目標，而不是問爲什麼當前的代碼無法正常工作。 – Wex 2012-01-10 17:52:36

將所有大寫字母混合成全部小寫字母是一種奇怪的編碼風格。 – Sparky 2012-01-10 18:03:45

-1

這解決了一個可變高度的問題：

HTML：

<div class="wrapper"> 
    <div class="bar"></div> 
    <div class="text">Text<br/>MoreText</div>  
</div>

CSS：

.wrapper { 
    width: 180px; 
    text-align: center; 
    border: 1px solid black; 
    position:relative; 
} 

.text { 
    position:relative; 
} 

.bar { 
    width: 40%; 
    background-color: red; 
    position: absolute; 
    top:0; 
    bottom:0; 
}

Demo

來源

2012-01-28 23:34:15

HTML：

<div class="wrapper"> 
    <div class="text">Text</div> 
    <div class="bar">&nbsp;</div> 
</div>

CSS：

.wrapper { 
    width: 180px; 
    text-align: center; 
    border: 1px solid black; 
    overflow: none; 
} 

.text { 
    line-height: 20px; /* make this match the height of .bar */ 
    float: left; 
    width: 100%; 
    text-align: center; 
} 

.bar { 
    height: 20px; /* make this match the line-height of .text */ 
    width: 40%; 
    position: relative; 
    top:0; left:0; 
    background-color: #f00; 
}

演示：http://jsfiddle.net/WE9xv/2/

來源

2012-01-10 18:19:41 Sparky

@RyanElkins：但是，我正確地回答了你最初提出的問題。 – Sparky 2012-01-10 23:20:28

@RyanElkins：你在這裏有一個真正的難題。進度條'div'是文本'div'的兄弟，因此除非您指定它或使用JS，否則兩個高度將相互獨立。另一方面，當允許文本換行時，進度條的外觀不一致怎麼辦？ – Sparky 2012-01-10 23:35:14

@RyanElkins：在你修改它之前，我完全回答了你原來的問題，從而使它無法回答。公平的事情將接受我原來的回答你的原始問題。 – Sparky 2012-01-28 20:18:15

Offcourse在現代瀏覽器，你可以只使用HTML 5標籤 '進步'。

來源： http://www.w3schools.com/tags/tag_progress.asp

來源

2014-11-24 09:56:06