问候，我有一张图片，我用Fireworks把它切片，然后我把它导出到html。我用Dreamweaver打开了HTML，并将文件保存到php中，它运行正常。我用HTML输入标签和HTML按钮替换了一些图像，并用与原始图像大小相同的css设置了它们的宽度和高度，我在Dreamweaver的实时视图中将它们完全放置在同一位置，页面看起来很完美，但当我在Firefox或IE中少用时，看起来很乱，输入字段和按钮的大小看起来更大。请查看我的代码并建议我如何解决问题
我要把我原来的和修改后的进行比较。
原始代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>habib_contact_us.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Fri Jul 29 11:34:37 GMT-0400 (Eastern Daylight Time) 2011-->
</head>
<body bgcolor="#ffffff">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="970">
<!-- fwtable fwsrc="habib_contact_us_working_file.png" fwpage="Page 1" fwbase="habib_contact_us.jpg" fwstyle="Dreamweaver" fwdocid = "842372334" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" width="61" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="208" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="189" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="43" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="44" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="29" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="45" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="73" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="habib_contact_us_r1_c1" src="images/habib_contact_us_r1_c1.jpg" width="970" height="52" border="0" id="habib_contact_us_r1_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="52" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="7" colspan="3"><img name="habib_contact_us_r2_c1" src="images/habib_contact_us_r2_c1.jpg" width="458" height="261" border="0" id="habib_contact_us_r2_c1" alt="" /></td>
<td colspan="5"><img name="habib_contact_us_r2_c4" src="images/habib_contact_us_r2_c4.jpg" width="203" height="26" border="0" id="habib_contact_us_r2_c4" alt="" /></td>
<td rowspan="11"><img name="habib_contact_us_r2_c9" src="images/habib_contact_us_r2_c9.jpg" width="15" height="344" border="0" id="habib_contact_us_r2_c9" alt="" /></td>
<td rowspan="8"><img name="habib_contact_us_r2_c10" src="images/habib_contact_us_r2_c10.jpg" width="221" height="278" border="0" id="habib_contact_us_r2_c10" alt="" /></td>
<td rowspan="11"><img name="habib_contact_us_r2_c11" src="images/habib_contact_us_r2_c11.jpg" width="73" height="344" border="0" id="habib_contact_us_r2_c11" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="26" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r3_c4" src="images/habib_contact_us_r3_c4.jpg" width="203" height="3" border="0" id="habib_contact_us_r3_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r4_c4" src="images/habib_contact_us_r4_c4.jpg" width="203" height="25" border="0" id="habib_contact_us_r4_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r5_c4" src="images/habib_contact_us_r5_c4.jpg" width="203" height="3" border="0" id="habib_contact_us_r5_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r6_c4" src="images/habib_contact_us_r6_c4.jpg" width="203" height="23" border="0" id="habib_contact_us_r6_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="23" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r7_c4" src="images/habib_contact_us_r7_c4.jpg" width="203" height="6" border="0" id="habib_contact_us_r7_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="5"><img name="habib_contact_us_r8_c4" src="images/habib_contact_us_r8_c4.jpg" width="203" height="192" border="0" id="habib_contact_us_r8_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="175" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img name="habib_contact_us_r9_c1" src="images/habib_contact_us_r9_c1.jpg" width="61" height="83" border="0" id="habib_contact_us_r9_c1" alt="" /></td>
<td rowspan="2"><img name="habib_contact_us_r9_c2" src="images/habib_contact_us_r9_c2.jpg" width="208" height="23" border="0" id="habib_contact_us_r9_c2" alt="" /></td>
<td rowspan="4"><img name="habib_contact_us_r9_c3" src="images/habib_contact_us_r9_c3.jpg" width="189" height="83" border="0" id="habib_contact_us_r9_c3" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="17" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r10_c4" src="images/habib_contact_us_r10_c4.jpg" width="203" height="6" border="0" id="habib_contact_us_r10_c4" alt="" /></td>
<td rowspan="3"><img name="habib_contact_us_r10_c10" src="images/habib_contact_us_r10_c10.jpg" width="221" height="66" border="0" id="habib_contact_us_r10_c10" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="habib_contact_us_r11_c2" src="images/habib_contact_us_r11_c2.jpg" width="208" height="60" border="0" id="habib_contact_us_r11_c2" alt="" /></td>
<td rowspan="2"><img name="habib_contact_us_r11_c4" src="images/habib_contact_us_r11_c4.jpg" width="43" height="60" border="0" id="habib_contact_us_r11_c4" alt="" /></td>
<td><img name="habib_contact_us_r11_c5" src="images/habib_contact_us_r11_c5.jpg" width="44" height="22" border="0" id="habib_contact_us_r11_c5" alt="" /></td>
<td><img name="habib_contact_us_r11_c6" src="images/habib_contact_us_r11_c6.jpg" width="29" height="22" border="0" id="habib_contact_us_r11_c6" alt="" /></td>
<td><img name="habib_contact_us_r11_c7" src="images/habib_contact_us_r11_c7.jpg" width="45" height="22" border="0" id="habib_contact_us_r11_c7" alt="" /></td>
<td><img name="habib_contact_us_r11_c8" src="images/habib_contact_us_r11_c8.jpg" width="42" height="22" border="0" id="habib_contact_us_r11_c8" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><img name="habib_contact_us_r12_c5" src="images/habib_contact_us_r12_c5.jpg" width="160" height="38" border="0" id="habib_contact_us_r12_c5" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="38" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
修改代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {
display: block;
}
#txtEmail {
height: 25px;
width: 203px;
}
#txtName {
height: 26px;
width: 203px;
}
#txtSubject {
height: 23px;
width: 203px;
}
#txtMsg {
height: 192px;
width: 203px;
}
#btnSubmit {
height: 22px;
width: 44px;
}
#btnClear {
height: 22px;
width: 45px;
}
</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Fri Jul 29 11:34:37 GMT-0400 (Eastern Daylight Time) 2011-->
</head>
<body bgcolor="#ffffff">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="970" id="table">
<!-- fwtable fwsrc="habib_contact_us_working_file.png" fwpage="Page 1" fwbase="habib_contact_us.jpg" fwstyle="Dreamweaver" fwdocid = "842372334" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" width="61" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="208" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="189" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="43" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="44" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="29" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="45" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="73" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="habib_contact_us_r1_c1" src="images/habib_contact_us_r1_c1.jpg" border="0" id="habib_contact_us_r1_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="52" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="7" colspan="3"><img name="habib_contact_us_r2_c1" src="images/habib_contact_us_r2_c1.jpg" width="458" height="261" border="0" id="habib_contact_us_r2_c1" alt="" /></td>
<td colspan="5">
<?php /*?><img name="habib_contact_us_r2_c4" src="images/habib_contact_us_r2_c4.jpg" width="203" height="26" border="0" id="habib_contact_us_r2_c4" alt="" />
<?php */?>
<input type="text" name="txtName" id="txtName" />
</td>
<td rowspan="11"><img name="habib_contact_us_r2_c9" src="images/habib_contact_us_r2_c9.jpg" width="15" height="344" border="0" id="habib_contact_us_r2_c9" alt="" /></td>
<td rowspan="8"><img name="habib_contact_us_r2_c10" src="images/habib_contact_us_r2_c10.jpg" width="221" height="278" border="0" id="habib_contact_us_r2_c10" alt="" /></td>
<td rowspan="11"><img name="habib_contact_us_r2_c11" src="images/habib_contact_us_r2_c11.jpg" width="73" height="344" border="0" id="habib_contact_us_r2_c11" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="26" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r3_c4" src="images/habib_contact_us_r3_c4.jpg" width="203" height="3" border="0" id="habib_contact_us_r3_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5" >
<?php /*?> <img name="habib_contact_us_r4_c4" src="images/habib_contact_us_r4_c4.jpg" width="203" height="25" border="0" id="habib_contact_us_r4_c4" alt="" /><?php */?>
<input type="text" name="txtEmail" id="txtEmail" />
</td>
<td><img src="images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r5_c4" src="images/habib_contact_us_r5_c4.jpg" width="203" height="3" border="0" id="habib_contact_us_r5_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5">
<?php /*?><img name="habib_contact_us_r6_c4" src="images/habib_contact_us_r6_c4.jpg" width="203" height="23" border="0" id="habib_contact_us_r6_c4" alt="" /><?php */?>
<input type="text" name="txtSubject" id="txtSubject" />
</td>
<td><img src="images/spacer.gif" width="1" height="23" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r7_c4" src="images/habib_contact_us_r7_c4.jpg" width="203" height="6" border="0" id="habib_contact_us_r7_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="5">
<?php /*?><img name="habib_contact_us_r8_c4" src="images/habib_contact_us_r8_c4.jpg" width="203" height="192" border="0" id="habib_contact_us_r8_c4" alt="" /><?php */?>
<textarea name="txtMsg" cols="" rows="" id="txtMsg"></textarea>
</td>
<td><img src="images/spacer.gif" width="1" height="175" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img name="habib_contact_us_r9_c1" src="images/habib_contact_us_r9_c1.jpg" width="61" height="83" border="0" id="habib_contact_us_r9_c1" alt="" /></td>
<td rowspan="2"><img name="habib_contact_us_r9_c2" src="images/habib_contact_us_r9_c2.jpg" width="208" height="23" border="0" id="habib_contact_us_r9_c2" alt="" /></td>
<td rowspan="4"><img name="habib_contact_us_r9_c3" src="images/habib_contact_us_r9_c3.jpg" width="189" height="83" border="0" id="habib_contact_us_r9_c3" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="17" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img name="habib_contact_us_r10_c4" src="images/habib_contact_us_r10_c4.jpg" width="203" height="6" border="0" id="habib_contact_us_r10_c4" alt="" /></td>
<td rowspan="3"><img name="habib_contact_us_r10_c10" src="images/habib_contact_us_r10_c10.jpg" width="221" height="66" border="0" id="habib_contact_us_r10_c10" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="habib_contact_us_r11_c2" src="images/habib_contact_us_r11_c2.jpg" width="208" height="60" border="0" id="habib_contact_us_r11_c2" alt="" /></td>
<td rowspan="2"><img name="habib_contact_us_r11_c4" src="images/habib_contact_us_r11_c4.jpg" width="43" height="60" border="0" id="habib_contact_us_r11_c4" alt="" /></td>
<td>
<?php /*?> <img name="habib_contact_us_r11_c5" src="images/habib_contact_us_r11_c5.jpg" width="44" height="22" border="0" id="habib_contact_us_r11_c5" alt="" /><?php */?>
<input name="btnSubmit" type="submit" value="Send" id="btnSubmit"/>
</td>
<td><img name="habib_contact_us_r11_c6" src="images/habib_contact_us_r11_c6.jpg" width="29" height="22" border="0" id="habib_contact_us_r11_c6" alt="" /></td>
<td>
<?php /*?><img name="habib_contact_us_r11_c7" src="images/habib_contact_us_r11_c7.jpg" width="45" height="22" border="0" id="habib_contact_us_r11_c7" alt="" /><?php */?>
<input name="btnClear" type="reset" value="Clear" id="btnClear" />
</td>
<td><img name="habib_contact_us_r11_c8" src="images/habib_contact_us_r11_c8.jpg" width="42" height="22" border="0" id="habib_contact_us_r11_c8" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><img name="habib_contact_us_r12_c5" src="images/habib_contact_us_r12_c5.jpg" width="160" height="38" border="0" id="habib_contact_us_r12_c5" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="38" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
每个浏览器对表单元素的渲染方式都不同，有些浏览器比其他浏览器添加了更多的填充，因此，虽然您的dreamweaver预览可能看起来很棒，但您必须进行真实世界的浏览器测试，如有必要，请将特定于浏览器的样式应用于这些表单元素，以使其符合您的设计。你应该看看Paul Irish的HTML5 Boilerplate：http://html5boilerplate.com/
如果你想要更具体的代码帮助，请把一些东西放在我们都能看到和评估的地方。
解决许多浏览器css渲染差异的一种方法是以下技术：
-它被称为Reset Css，在这里，我给你贴一个到其中一些的快速链接：
。解释：http://www.cssreset.com/what-is-a-css-reset/
.实际的resetcss文件：http://www.cssreset.com/
Reset-Css所做的是将Css属性"重置"为"0"，这意味着它告诉所有浏览器删除它们所拥有的首选项(是的，在每个浏览器中，这些微小而微妙的细节会扭曲你的Css(，也就是说它以某种方式删除了许多不舒服的浏览器Css渲染差异。
它不会把你从所有呈现差异的浏览器中拯救出来，但它确实有帮助，我的建议是使用它
你说我该怎么用？简单，只需创建一个名为"reset.css"的新css文件，并在链接自己的style.css之前像标准css一样链接它。另一种方法是将所有的resset css代码粘贴到实际的css样式表中，就在它的顶部。
顺便说一句，插件插件等，是为原始非洲居民。
希望能有所帮助。