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不理解[type = button]等css选择器。

使用类代替。

我知道，这很不幸，也很烦人......这是IE。

Answer 2

这是一个很长的镜头，但试着把

position: relative;

关于按钮的样式（即.submit，.print，.reset）。

我已经解决了这个问题，解决了IE中一些神秘的CSS问题。我找到了一个引用，将其称为IE魔术弹：http://www.communitymx.com/content/article.cfm?cid=C37E0

HTML / CSS按钮无法在IE中正确显示

2 个答案: