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