Кнопки HTML / CSS не отображаются в IE должным образом

Question

У меня есть четыре кнопки в форме HTML.Вот HTML:

                <div class="fileinputs">
                    <input type="file" class="file" name="uploadedfile" />
                    <div class="fakefile">
                            <img src="../assets/images/uf_btt.png" />
                    </div>
                </div>
                <div class="fileinputs">
                    <input type="reset" class="file" />
                    <div class="fakefile">
                            <img src="../assets/images/reset_btt.png" />
                    </div>
                </div>
                <div class="fileinputs">
                    <input type="button" class="file" onclick="window.print()" />
                    <div class="fakefile">
                            <img src="../assets/images/print_btt.png" />
                    </div>                      
                </div>

Вот CSS:

input[type=submit]
{
    width: 119px;
    height: 47px;
}

input[type=button]
{
    width: 119px;
    height: 47px;
}

input[type=reset]
{
    width: 119px;
    height: 47px;
}

input[type=file]
{
    width: 119px;
    height: 47px;
}

div.fileinputs {
    position: relative;
    float: left;
}

div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

Все четыре кнопки отображаются правильно во всех браузерах, кроме IE, где они несколько неправильно расположены.Мне кажется, что IE не знает, как поместить изображение над типом ввода «файл», и поэтому справа от него есть пробел, который занимает прозрачная кнопка «Обзор».Если вы откроете страницу в IE и попробуете использовать кнопки, вы поймете, что я имею в виду: eximi.dreamhosters.com/Hawaii/html/contact_email.php Понимаете, пожалуйста?

Спасибо!

Answer 1

IE не понимает селекторы CSS, такие как [type = button].

Вместо этого использует классы.

Я знаю, это печально и раздражает ... это IE.

Answer 2

Это немного, но попробуйте поставить

position: relative;

на стили для ваших кнопок (т.е. .submit, .print, .reset).

I 'Мы работали над проблемами, которые помогли решить некоторые загадочные проблемы CSS в IE.Я нашел ссылку, которая упоминает это как волшебную пулю IE: http://www.communitymx.com/content/article.cfm?cid=C37E0