两个按钮（超链接，提交）申请样式表后不一样大小

我有两个按钮，第一个是<a>标签，第二个是<input type="submit">。
我想使这两个像一些。两个按钮（超链接，提交）申请样式表后不一样大小

下面是关于firefox enter image description here

截图还有以下是IE7 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

来源

2014-01-21 Lion King

先给display:inline-block您<a>标签。这只是一个浮动问题。你的锚标签没有任何浮动。

来源

2014-01-21 05:53:40 Era

谢谢，但我试图使用'display：inline-block'，但问题仍然存在。 –

有时即不会正常运行的代码......所以那个时候我们应该使用条件样式...这里u可以使用新的样式表，其中包括在<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/

您可以使用即语法hack..it就是这么简单，没有更多的样式表在现场使用...

.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

希望这有助于你....

来源

2014-01-21 05:53:58 Krish

你说得对的是IE7的问题。但是，我不能upvote。第二个解决方案是一个可怕的，可怕的黑客应该已经被抢出来很久以前。 –

我正在使用这两种解决方案......直到现在我还没有遇到过更多的问题......无论如何你愿意...... – Krish

两个按钮（超链接，提交）申请样式表后不一样大小

回答

相关问题