CSS float проблема в IE6 / 7 - PullRequest
Новая
       35

CSS float проблема в IE6 / 7

1 голос
/ 28 апреля 2011

У меня странная проблема с плавающей точкой в ​​CSS в IE6 и IE7.

Мой HTML-код: 

<fieldset style="float:left">
    <legend>Summary</legend>
    <div class="display-label">Recruitment type</div>
    <div class="display-field">Permanent Labour</div>
    <div class="display-label"># resources</div>
    <div class="display-field">2</div>
    <div class="display-label">Request Created</div>
    <div class="display-field">4/28/2011</div>
    <div class="display-label">Requested by</div>
    <div class="display-field">1066594</div>
    <div class="display-label">Status</div>
    <div class="display-field">Active</div>
</fieldset>

и мой CSS: 

.display-label, .display-field
{
    padding: 0.35em 0.25em;
    float: left;
}

.display-label
{
    width: 13em;
    text-align: right;
    clear : left;
    font-weight: bold;
}

.display-field
{
    margin-left: 1em;
}

IE 8+ и Firefox отображают это правильно так:

Correct display in Firefox/IE8

IE6 и 7, однако, отображают следующее:

Bad display in IE 6/7

Как я могу это исправить?

Ответы [ 2 ]

1 голос
/ 28 апреля 2011

вам нужно содержать поплавки, т. Е. Использовать некоторую форму разрешения, но вам не нужно все плавать

сначала удалить встроенный стиль , отпустить fieldset

<fieldset style="float:left">

, если вы хотите, чтобы fieldset «сжал» (плавающий элемент без ширины должен сделать это), вам лучше установить ширину или максимальную ширину, IE ужене вполне правильно понимает поведение shrink-wrap: элемент «shrunk» содержит элементы с hasLayout, что делает этот 'fieldset` из-за плавающих элементов div внутри

, тогда этот CSS должен работать без взломаHTML 

.display-label, 
.display-field {
    padding: 0.35em 0.25em;
}

.display-label {
    float: left; 
    clear: left; 
    width: 13em; 
    text-align: right; 
    background: #eee; 
    font-weight: bold;
}

.display-field {
    overflow: hidden;
}
1 голос
/ 28 апреля 2011

РЕДАКТИРОВАТЬ: Вам нужно указать очистить после создания метки и поля.Технически вы должны обернуть метку и поле элементом контейнера, чтобы предотвратить смещение, но это должно выполнить то, что вы ищете. 

<fieldset style="float:left">
    <legend>Summary</legend>
    <div class="display-label">Recruitment type</div>
    <div class="display-field">Permanent Labour</div>

    <div style="clear:both;"></div>

    <div class="display-label"># resources</div>
    <div class="display-field">2</div>

    <div style="clear:both;"></div>

    <div class="display-label">Request Created</div>
    <div class="display-field">4/28/2011</div>

    <div style="clear:both;"></div>

    ...

</fieldset>
...