Как вы можете сделать <div>менее 13 пикселей в IE6?

Question

Как вы делаете DIV очень короткими в IE6? Независимо от того, использую я 0.3em или 3px, IE6 требует минимум 13px.

IE6

Firefox 3.6.13 (выглядит очень похоже во всех других современных браузерах)

HTML

<div id="fileProgressBar" style="display:none">
    <div id="fileProgressFill"></div>
</div>

CSS

#fileProgressBar {
    height: 0.3em;
    background: #444;
    background: -moz-linear-gradient(
        top,
        #333,
        #666
    );
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #333),
        color-stop(1, #666)
    );
    border-top: 1px solid #000;
}

    #fileProgressFill {
        height: 100%;
        width: 0;
        background: #0088cc;
        background: -moz-linear-gradient(
            top,
            #0099e5,
            #006699
        );
        background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #0099e5),
            color-stop(1, #006699)
        );
    }

Javascript

Javascript отображает индикатор выполнения файла в подходящее время и обновляет заполнение файла во время воспроизведения фильма. Но эта ошибка не является проблемой JS, поэтому я не буду публиковать код JS.

Answer 1

Оказывается, я немного усложнил это:

Просто сделайте:

#fileProgressBar {
    height: 3px;
    font-size: 0;
    ..
}

---

Чтобы исправить это в IE6, к #fileProgressBar добавьте font-size: 3px.Тем не менее, это делает его неправильным в обычных браузерах.Таким образом, самый простой способ - это исправить это, применив этот стиль в условном комментарии 1011 * или добавив его таким образом, используя CSS-хак (который, к счастью, проверяет), так что толькоIE6 может видеть это:

* html #fileProgressBar {
    font-size: 3px
}

Я собираюсь посмотреть, есть ли более аккуратный способ исправить это.