1

我有一个带有表单的 html 页面。我正在尝试将图像添加到按钮。到目前为止，按钮的图像在 Firefox 和 chrome 中工作/显示。但在 IE8 中它只是显示正常的输入按钮。甚至透明度和其他属性也不起作用。任何人都可以建议任何解决方案，或者如果我错了，请纠正我，因为我只是所有这些网络事物的菜鸟。谢谢！

base.html：

{% load static %}
<html>

    <head>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="{% static "assets/css/style.css" %}">
    </head>

    <body>
    <header>
        <div id="main">
            <div id="content">
                <a href="http://www.google.com"><img src="{% static "assets/images/google.png" %}" width="202.5" class="logo"/></a>
            </div>
            <div id="form">
                <form action="/auth/" method="post">{% csrf_token %}
                    <label for="email" class="label">Email</label>
                    <input type="text" name="email" value="" id="email">

                    <label for="password" class="label">Password</label>
                    <input type="password" name="password" value="" id="password">

                    <input type="submit" value=" "/>
                </form>
            </div>
        </div>
    </header>

    <footer>
        <div id="footer">
            <div id="image">
                <div>
                    <a href="/assets/image/test.png"></a>
                </div
            </div>
        </div>
    </footer>

样式.css：

* {
    margin:0;
    padding:0;
}


body{
    background:#3effbd;
}

#main {
    background-color:#3B5998;
    width:1000%;
    height:90px;
}

.logo {
    border:none;
    top:24px;
    left:247px;
    position:relative;
    padding:0px;
    margin:0px;
}

.login li{
position:relative;
top: -10px;
left: 900px;
display:inline;
}

input[type=submit]{
    border:none;
    background-color: transparent;
    overflow: hidden;
    cursor: pointer;
    width: 57px;
    height: 26px;
    background-image: url(../images/button.png);
}

.label {
    font-size: 15px;
    color: white;
    position: relative;
    margin: 10px;
}
4

3 回答 3

0

您在按钮中没有任何价值 - 它不会显示任何内容。添加&nbsp;值或使用良好的 'ol indent:-999999 值。

还要添加这个 CSS

display:inline-block;
于 2013-08-21T19:59:13.987 回答
0

我在本地驱动器上复制了整个代码，但在 IE8 中运行良好！

但是，不要使用输入类型提交试试这个：

<button type="submit"></button>
于 2013-08-21T19:59:01.157 回答
0

我有一个非常相似的情况，我现在找到了一个完美的解决方案。它已经在运行 Win XP 和 IE8 的虚拟机上进行了测试，可以 100% 运行。

这是我发现的：

在 IE8 的开发人员工具中，输入 [type=submit] 与提交按钮相关联，但实际上没有任何相关的 css 规则生效。为了证明这一点，我在开发工具中更改了它们，甚至删除了它们。按钮保持不变。

因此，似乎附加了规则，但属性没有得到实现。解决这个问题的简单方法是给你的按钮一个类，然后将这个类添加到 css 中的按钮规则中，如下所示：

<input type="submit" value=" " class="btn"/>

然后将该类添加到您的CSS：

input[type=submit], .btn{
border:none;
background-color: transparent;
overflow: hidden;
cursor: pointer;
width: 57px;
height: 26px;
background-image: url(../images/button.png);
}

您现在应该看到规则属性生效。

如果不是，您应该尝试更改：

background-image: url(../images/button.png);

至

background: url(../images/button.png);

因为有报告称图像在第一次在 css 文件中使用时需要作为背景引用。

于 2014-04-08T09:29:16.190 回答