Internet Explorer 8中的HTML提交按钮定位问题
[英]HTML Submit Button positioning issue in Internet Explorer 8
问题描述
which is almost right on Chrome and firefox but the problem is the position of the submit button on IE if too right than the css. 
在Chrome和firefox上几乎是正确的，但是问题是IE上的提交按钮的位置（如果比CSS正确）。 Please check the code and help as soon as possible. 请检查代码并尽快提供帮助。
HTML &CSS Code you can find on the link http://jsfiddle.net/7vUW6/ 您可以在链接http://jsfiddle.net/7vUW6/上找到HTML和CSS代码
2 个解决方案
解决方案1
0 2012-08-07 19:17:48
If you want to center it, remove class="submit" and replace it with style="text-align: center;". 如果要居中，请删除class =“ submit”并将其替换为style =“ text-align：center;”。 That will center the button in the row. 这将使按钮在行中居中。
Also for IE, don't forget to specify a DOCTYPE declaration in your markup. 同样对于IE，不要忘记在标记中指定DOCTYPE声明。 Use this: 用这个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
解决方案2
0 已采纳 2012-08-07 19:57:22
i saw your codings and fix the issues , you had some mistakes accroding to the input box not set the proper width. 我看到了您的编码并解决了这些问题，您在输入框中未设置正确的宽度时犯了一些错误。 Then the submit button is also i fix the issues and i check all the browers now alignment is correct.The edit coding as follows. 然后提交按钮也是我解决问题并检查所有浏览器现在对齐是否正确。编辑代码如下。 please copy this code and run your system. 请复制此代码并运行您的系统。
complete codings: 完整的编码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Customer Advance and Project Registration System | Ymoff Technologies Pvt. Ltd.</title>
<meta name="description" content="This is Project Registration and Customer Advance Payment Recept System designed and developed for Ymoff Technologies." />
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script type="text/javascript">
function clearThis(target){
target.value= "";
}
</script>
<script type="text/javascript">
function autoGrow (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
</script>
<style>
/*-- Reset CSS --*/
.wraper{
width:70%;
margin: 0px auto;
padding:0;
}
#field {
}
#ftext{
font-family: 'Capriola', sans-serif;
}
#btext{
font-family: 'Quando', serif;
font-weight:400;
}
#space{
padding-left:5%;
}
.submit{
padding-left:54%;
padding-right:60%;
clear:both;
}
#value{
color:#999;
}
textarea {
resize: none;
}
#noscrollbars {
overflow:hidden;
}
#inform{
color:#C00;
font-size:12px;
text-align:justify;
}
select{
color:#00F;
}
textarea{
border-right: #a9a9a9 1px solid;
border-top: #a9a9a9 1px solid;
border-left: #a9a9a9 1px solid;
border-bottom: #a9a9a9 1px solid;
color:#00F;
}
#show1{
color:#10e684;
font-size:18px;
font-weight:600;
}
#show2{
color:#9e2a28;
font-size:18px;
font-weight:600;
}
#show3{
color:#9e2a28;
font-size:10px;
}
fieldset{
width:400px;
padding-top:5px;
}
legend{
font-family: "Quando", serif;
}
.umame
{
text-align:right;
float:left;
padding-bottom:5px;
padding-right:8px;
}
.umame1
{
text-align:left;
float:left;
padding:0px;
margin:0px;
padding-bottom:5px;
}
</style>
</head>
<body class="wraper">
<div>
<img src="images/dashboardlogin.png" style="padding-top:10px; padding-left:15%;" />
<br />
<br />
<div class="container">
<center>
<br /><br /><br />
<h2 id="btext">Please perfectly enter the following fields :</h2>
<form name="login" action="" method="post">
<fieldset>
<table width="337" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="169" class="umame">
<span id="ftext">Client Registration ID <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="text" name="userid" value="Cleint Registraion ID" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169">
<span id="ftext">Temporary Password <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="password" name="password" value="***************" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169"> </td>
<td width="156" class="umame1">
<input type="submit" name="ok" value="Login" />
</td>
</tr>
</table>
</fieldset>
</form>
<table width="337">
<tr>
<td ><span id="inform"><br />
* Marks fields are sent to you by E-Mail when your project has been registered with us. If any how if you lost our mail and want to get your Password, please visit this link <a href="#">Get Password</a> with your YMOFF Registration ID. </span>
</td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.