javascript - 中心对齐的跨浏览器问题

Question

我是编码新手，我在使页面在所有浏览器上正确显示时遇到了问题。现在它可以完美地与 IE 配合使用，但是当我在 Firefox 或 Chrome 中打开时我会丢失格式。

这是我正在使用的代码的摘录:

 <style type="text/css">

#headerIMG {
    padding:0;
    margin:0;
    margin-bottom:15px;
    width:100%;
    }
label {
    padding-right:10px;
    text-align:left;
    {
table   {
    width: 580px;
    margin: 0 auto;
    text-align: center;
    align: center;
    }

.centerspacer {
    width:50%;
    }
tr  {
    width: 580px;
    margin: 0 px;
    }

td {
    padding:5px;
    }
.center {
    text-align:center;
    }
.button {
    float:none;
    display:block;
    margin: 10px auto;
    text-align:center;
    }

form    {
    width: 580px;
    margin: 0 auto;
    }
.rectbcontent {
    width: 580px;
    margin: 0 auto;
    text-align:center;
    }
table.tbody {
    width: 580px;
    margin: 0 auto;
    }
</style>

 <form action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<input type=hidden name="oid" value="00DK0000005Iu4O">
<input type=hidden name="retURL" value="http://www.vela-ins.com">


<table class="tbody">

<tr>
<td class="centerspacer"> </td>
<td><label  for="first_name">First Name</label></td>
<td><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" />          </td>
<td class="centerspacer"> </td>
</tr>
<tr>

<td class="centerspacer"></td>
<td><label  for="last_name">Last Name</label></td>
<td><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>

<tr>
<td class="centerspacer"></td>
<td><label  for="email">Email</label></td>
<td><input  id="email" maxlength="80" name="email" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>

<tr>
<td class="centerspacer"></td>
<td><label  for="phone">Phone</label></td>
<td><input  id="phone" maxlength="15" name="phone" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>

 <tr>
<td class="centerspacer"></td>
<td><label  for="company">Company</label></td>
<td><input  id="company" maxlength="40" name="company" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>

<tr>
<td class="centerspacer"></td><td>
<label  for="city">City</label></td>
<td><input  id="city" maxlength="40" name="city" size="20" type="text" /></td>
<td class="centerspacer"></td>
</tr>

<tr>
 <td class="centerspacer"></td>
<td><label  for="state">State/Province</label></td><td><input  id="state" maxlength="20" name="state" size="20" type="text" /></td><td class="centerspacer"></td>
</tr>

 </table>
</select>
</form>


 <script>
var x = 'https://images.wrberkley.com/imageserver/WRBTS/VELA/site/images/';

var assignrule;
var imageURL;
var lob = getQueryVariable('product');

lob = lob.toLowerCase().charAt(0);



switch (lob)
{
//change this case to look at first character for construction
case 'c':

imageURL=x + 'Headlines/constructionheader.png';

assignrule='Construction';
break;


case 'm':
imageURL=x + 'Headlines/manufacturingheader.png';

assignrule="Manufacturing";
break;
case 'p': 
imageURL=x + 'Headlines/professionalliabilityheader.png';
assignrule="Professional Liability";
break;
case 'g':
imageURL=x + 'Headlines/generalcasualtyheader.png';
assignrule="General Casualty";
break;
default:
imageURL=x + 'header.png';
assignrule="default";
}
document.getElementById('headerIMG').src = imageURL
document.getElementById("00NK0000000Yqv2").value = assignrule;
</script>

Answer 1

要使表格居中，请从标记中删除那些 centerspacer 单元格，并仅使用

table {
    margin-left: auto;
    margin-right: auto;
}

此外，您在 label 的 css 声明中存在语法错误，这会导致以下任何样式崩溃。检查浏览器的错误控制台!