Question

我有两个按钮，第一个为<a>标签，第二个为<input type="submit"> 我想让两者都像是一样。

以下是firefox上的screenShot enter image description here

以下是IE7上的screenShot enter image description here

HTML

<div id="loginForm">
    <form action="login.php" method="post">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" /><br />
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" /><br /><br />
        <input type="submit" name="sbmtLogin" value="Sign in" /> 
        <a href="register.php">Sign up</a> 
    </form>
</div>

CSS

body {
    margin:0;
    padding:0;
}
div#loginForm {
    width:270px;
    max-width:270px;
    margin:100px auto;
    padding:10px;
    text-align:center;
    background-color:#8de3fd;
}
div#loginForm input[type=text], div#loginForm input[type=password] {
    border:1px solid #9a9a9a;
    width:150px;
    margin:3px;
    padding:5px;
    color:#5b5b5b;
}
div#loginForm label {
    display:inline-block;
    width:70px;
}
div#loginForm input[type=submit] {
    border:1px solid #9a9a9a;
    width:50%;
    padding:5px;
    background-color:#f2f2f2;
    color:#5b5b5b;
    font: bold 16px arila;
}
div#loginForm a {
    border:1px solid #9a9a9a;
    background-color:#f2f2f2;
    color:#5b5b5b;
    padding:5px;
    text-decoration:none;
    font: bold 16px arila;
}

您还可以看到JsFiddle online demo

Answer 1

尝试将display:inline-block提供给您的<a>代码。这只是一个浮动问题。你的锚标签没有任何浮动。

Answer 2

有时即不会正确使用某些代码...所以我们应该使用条件样式表...这里你可以使用一个新的样式表，其中包含<head>条件代码，如下所示

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->

你可以随意指定你的类属性......它只反映了ie7 ......

您可以在此处查看更多内容：http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

OR

你可以使用ie语法hack ..它是如此简单，没有更多的样式表用于网站......

.class {

    background: gray; /* standard */    
    background: pink\9; /* IE 8 and below */    
    *background: green; /* IE 7 and below */    
    _background: blue; /* IE 6 */

}

即语法黑客：http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

希望这能帮到你......

应用样式表后，两个按钮（超链接，提交）大小不同

2 个答案: