CSS/HTML表单：IE和Opera中的按钮对齐错误

我目前在我的HTML表单中卡住了一个奇怪的对齐问题。在Firefox/Chrome浏览器/ Konqueror的布局就好了 - 见下文CSS/HTML表单：IE和Opera中的按钮对齐错误

Layout in FireFox

但在IE8和歌剧的布局是这样的：

Layout in IE

我的HTML看起来像这样

<body bgcolor="#FFFFFF" text="#3d4144" id="jobs"> 
<div align="center"> 
    <table border="0" cellpadding="0" cellspacing="0"> 
     <tr>   
    <td style="text-align: center;">Please login to post a job.</td> 
     </tr> 
     <tr> 
    <td> 
    <div id="stylized" class="myform"> 
    <form id="form" name="form" method="post" action="loginproc.php"> 
     <label>Username: 
     <span class="small">Enter your e-mail</span> 
     </label> 
     <input type="text" name="name" id="name"> 
     <label>Password: 
     <span class="small">Enter your password</span> 
     </label> 
     <input type="password" name="password" id="password"> 
     <button type="submit">Login</button>  
    </form>     
    </div> 
</td> 
    </tr> 
    <tr> 
<td style="text-align: center;"> 
    <a class="body" href="register.php" style="text-decoration: none">If you are not registred yet, you can signup here (free of charge)!</a> 
</td> 
    </tr> 
    </table>

and my CSS lo OKS这样

#stylized input{ 
float:left; 
font-size:10px; 
font: normal Verdana,sans-serif; 
padding:5px 2px; 
border:solid 1px #2B578A; 
width:200px; 
margin:2px 0 10px 10px; 
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
} 

#stylized input[type="password"]{ 
float:left; 
font-size:10px; 
font: normal Verdana,sans-serif; 
padding:5px 2px; 
border:solid 1px #2B578A; 
width:200px; 
margin:2px 0 10px 10px; 
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
} 


#stylized label { 
display:block; 
font-weight:bold; 
float: left; 
width: 10em; 
margin-right: 1em; 
text-align: right; 
width:140px; 
} 

#stylized .small{ 
color:#666666; 
display:block; 
font-size:11px; 
font-weight:normal; 
text-align:right; 
width:140px; 
} 

.myform{ 
margin:0 auto; 
width:400px; 
padding:14px; 
} 

#stylized button{ 
clear:both; 
margin-left:160px; 
width:120px; 
height:25px; 
text-align:center; 
line-height:20px; 
color:#FFFFFF; 
font-size:11px; 
font-weight:bold; 
background:#414549; 
font-family: Verdana, sans-serif; 
border: 0px solid #2B578A; 
} 

#stylized button:hover{ 
background:#2B578A; 
color:#FFFFFF; 
border: 0px solid #2B578A; 
}

的问题，只要我把形式为表（这是我的一些设计目的做）开始。

来源

2012-12-15 user1204121

这是一个调试的小提琴：http://jsfiddle.net/XNpKa/。 IE8和FF都看起来像我所看到的第一个例子。 –

由于某些原因，您的标签有两个宽度（宽度：10em; &&宽度：140px;）。不知道这是否会成为问题。 – qooplmao

在IE8中看起来和我一样在Firefox – underscore

<div align="center">

这是罪魁祸首。或者移除它，或者在提交按钮周围的元素上设置“text-align：left”。

来源

2012-12-15 20:27:24 Enrico

非常感谢 - 这是解决方案！ – user1204121

CSS/HTML表单：IE和Opera中的按钮对齐错误

回答

相关问题