Fatal编程技术网
  • css/
  • IE8 CSS问题与浮动和%width容器

IE8 CSS问题与浮动和%width容器

css internet-explorer-8

IE8 CSS问题与浮动和%width容器,css,internet-explorer-8,cross-browser,width,css-float,Css,Internet Explorer 8,Cross Browser,Width,Css Float,我遇到了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="wid

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


正文
这给了我以下结果：

doctype设置为strict。文本div位于宽度介于0-100%之间的div中的原因是为可变宽度div指定适当的高度

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

其中的一些关键因素是高度不能固定，因为文本可能会溢出框的宽度。包含框和“填充”的高度都需要能够根据内容而变化。

HTML:

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

.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;
}

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

.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;
}
演示：

HTML:

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

.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;
}

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

.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;
}
演示：

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

HTML:

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

.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;
}

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

.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;
}

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

HTML:

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

.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;
}

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

.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;
}

当然，在现代浏览器中，您只需使用HTML5标记“progress”

资料来源：
当然，在现代浏览器中，您只需使用HTML5标记“progress”

资料来源：

我刚刚在Firefox和IE8中检查了您的代码，它的显示方式似乎相同。另外，当我更改宽度%时，它同时适用于Firefox和IE8。你是在使用IE8还是IE测试仪？你在另一个180px的宽度内有一个180px的宽度，但在同一个180px的宽度元素内也有一个40%的宽度-这对我来说毫无意义。与其问你当前的代码为什么不起作用，不如问你正在尝试实现什么可能更有益。是的，但我不知道海报想要什么，只需移除innner 180px的宽度，或将其修改为更小的数量，以使内部具有40%宽度的“填充物”，居中…简单的删除会产生一个居中的文本，背景为红色，但与发布的两个示例都不匹配。混合所有大写和小写是一种奇怪的编码风格。我刚刚检查了Firefox和IE8中的代码，它的显示方式似乎是相同的。另外，当我更改宽度%时，它同时适用于Firefox和IE8。你是在使用IE8还是IE测试仪？你在另一个180px的宽度内有一个180px的宽度，但在同一个180px的宽度元素内也有一个40%的宽度-这对我来说毫无意义。与其问你当前的代码为什么不起作用，不如问你正在尝试实现什么可能更有益。是的，但我不知道海报想要什么，只需删除innner 180px的宽度，或将其修改为更小的宽度，以使内部有40%宽度的“填充”，居中…简单的删除会使文本居中并带有红色背景，但与发布的示例都不匹配。将所有大写字母与所有小写字母混合是一种奇怪的编码样式。@RyanElkins:但是，我正确地回答了你最初提出的问题。@RyanElkins:你这里有一个真正的难题。进度条
div
是文本
div
的同级，因此除非您指定或使用JS，否则这两个高度将彼此独立。另一方面，当你允许文本换行时，进度条的不一致性又如何呢？@RyanElkins:在你改变它从而使它无法回答之前，我准确地回答了你原来的问题。公平的做法是接受我对你原始问题的原始答案。我对你的答案投了赞成票，因为它很有用，而且我没有提供我应该提供的信息，这不是你的错。编辑功能在那里，所以我可以编辑问题，而不是开始一个全新的问题，因为我第一次遗漏了一些东西。这也不是无法回答的。我已经弄明白了，并将用正确的答案更新这个问题。谢谢你的帮助。事实上，你的答案非常接近，只是需要一些调整。@RyanElkins，好的，谢谢。然而，最正确的做法是将您的最终答案作为另一个答案发布并接受它，而不是将答案放在原始问题中。@RyanElkins:然而，我正确地回答了您最初提出的问题。@RyanElkins:您在这里遇到了一个真正的难题。进度条
div
是文本
div
的同级，因此除非您指定或使用JS，否则这两个高度将彼此独立。另一方面，当你允许文本换行时，进度条的不一致性又如何呢？@RyanElkins:在你改变它从而使它无法回答之前，我准确地回答了你原来的问题。公平的做法是接受我对你原始问题的原始答案。我对你的答案投了赞成票，因为它很有用，而且我没有提供我应该提供的信息，这不是你的错。编辑功能在那里，所以我可以编辑问题，而不是开始一个全新的问题，因为我第一次遗漏了一些东西。这也不是无法回答的。我已经弄明白了，并将用正确的答案更新这个问题。谢谢你的帮助。事实上，你的答案非常接近，只是需要一些调整。@RyanElkins，好的，谢谢。然而，最正确的做法是将你的最终答案作为另一个答案发布并接受它，而不是将答案放在原来的问题中。