IE8 CSS проблема с плавающими и% ширины контейнеров - PullRequest
Новая
       29

IE8 CSS проблема с плавающими и% ширины контейнеров

1 голос
/ 10 января 2012

Я столкнулся с проблемой CSS в IE8. 

  <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 установлен строго.Причина, по которой текстовые элементы div находятся в элементе div, ширина которого может составлять 0-100%, заключается в том, что переменная ширина div имеет правильную высоту.

Что мне нужно сделать, чтобы достичь первогоэффект в IE8?

Некоторые ключевые элементы этого - то, что высота не может быть фиксирована, потому что текст может превышать ширину поля.Высота как контейнера, так и «заливки» должна изменяться в зависимости от содержимого.

Ответы [ 3 ]

2 голосов
/ 10 января 2012

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/

0 голосов
/ 24 ноября 2014

Конечно, в современных браузерах вы можете просто использовать html 5 тег «прогресс».

Источник: http://www.w3schools.com/tags/tag_progress.asp

0 голосов
/ 29 января 2012

Это решает проблему переменной высоты:

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

Демо

...