Question

问候语，我有一个图像，我用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>

Answer 1

每个浏览器以不同的方式呈现表单元素，有些添加的填充比其他元素更多，因此虽然您的Dreamweaver预览可能看起来很棒，但您必须进行真实的浏览器测试，并且必要时将特定于浏览器的样式应用于这些表单元素以获取它们适合您的设计。你应该看看Paul Irish'HTML5 Boilerplate：http://html5boilerplate.com/

如果您需要更具体的代码帮助，请在我们可以看到和评估的地方放置一些内容。

Answer 2

解决许多浏览器css呈现差异的一种方法（基本上所有这些都会在一些细微的细节中呈现一些css代码），这是以下技术：

- 它被称为重置Css，在这里，我粘贴了一些快速链接到其中一些：

.explanation： http://www.cssreset.com/what-is-a-css-reset/

.actual resetcss文件： http://www.cssreset.com/

重置Css的作用是将css属性“重置”为“0”，这意味着它会告诉所有浏览器删除它们的prefferences（是的，那些在你这里和那里扭曲你的css的细微细微的细节）每个浏览器），这意味着它以某种方式消除了许多令人不舒服的浏览器CSS渲染差异。

它不会让你从所有浏览器中拯救出差异，但是，它确实有帮助，我的建议是使用它。

我说如何使用它？很简单，只需创建一个名为“reset.css”的新css文件，并在链接自己的style.css之前将其链接为标准css。另一种方法是将resset css的所有代码粘贴到实际的css样式表中，就在它的顶部。

顺便说一句，插件插件等等，适用于原始的非洲居民imo。

希望有所帮助。

Dreamweaver CS5实时视图和浏览器视图出现问题

2 个答案: