Question

我遇到了似乎是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

doctype设置为strict。文本div在宽度为0-100％的div中的原因是为了给变量宽度div提供适当的高度。

为了在IE8中实现第一个效果我需要做什么？

对此的一些关键要素是高度无法修复，因为文本可能会溢出框的宽度。包含框和“填充”的高度需要能够根据内容而变化。

Answer 1

<强> 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/

Answer 2

在现代浏览器中，你可以使用html 5标签'progress'。

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

Answer 3

这解决了可变高度的问题：

<强> 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

IE8 CSS问题与浮点数和％宽度容器

3 个答案: