css按钮浏览器问题（背景图片）

Question

我在这里遇到一些问题。无论我做什么，chrome和firefox似乎都会使这个css代码变得与众不同。 Chrome中的按钮（Logg inn）看起来有点偏，但如果我使用margin-top（带负数），两个浏览器都会将按钮推向页面的顶部。

CSS代码

    #top_wrapper #login_form #btn_login {
        width: 75px;
        height: 30px;
        background-image: url('../img/btn/login.png');
        border: none;
    }

我是否只需定位Chrome？或者我该怎么做，我该如何解决这个问题？任何帮助都会很棒！

HTML代码

<div id="login_form">

    <form id="form_login" action="" method="POST">

        <input class="form_login" type="text" value="Brukernavn" onfocus="if(this.value == 'Brukernavn')this.value=''" onblur="if(this.value == '')this.value='Brukernavn'" />
        <input class="form_login" type="password" value="Passord" onfocus="if(this.value == 'Passord')this.value=''" onblur="if(this.value == '')this.value='Passord'" />
        <input id="btn_login" title="Logg inn" type="submit" value="" />

    </form>

    <div id="lost_password_btn">
        <img title="Mistet passordet?" src="img/btn/lost_password.png" />
    </div> <!-- end lost_password_btn -->

</div> <!-- end login_form -->

Answer 1

在Chrome中按F12并使用开发工具确定空间的来源。

Answer 2

我通过浮动表单输入元素来解决问题，不知道为什么我之前没有这样做。不管怎样，谢谢。