中心属性似乎“移位”并且桌子位置错误

Question

作为一名对基本 html 的访问权限有限的客户服务人员，我被分配了一项任务，该任务超出了我制作一个像样的高亮项目页面的技能之外，经过一系列搜索之后，我以某种方式让事情正常进行，嗯，在firefox，当我在 Chrome 和 IE 中加载相同的内容时，我发现了不同的问题，尽我所能，我不知道是什么导致了问题......

您可能首先希望查看 Firefox 版本，因为它可以完美地显示为我想要的：
http://jsfiddle.net/kitchellw/TR6v5
（而且我不知道为什么第一行没有应用 CSS...）

在IE中，圆角消失了，我不会太担心......但是

• 填充消失了...
• 下面的桌子看起来一团糟
• 我找到了解决图片边框的方法，就是border=0

在铬中，

• 虽然上半部分看起来不错，但下半部分的内容似乎“向右移动”了几个像素，不再居中

下面是问题表的确切代码：

<table class=highlightitem>
<tr>
<td height="200" valign="top" >
<center>
<a href="http://www.digitalbuydirect.com/index.php?route=product/category&keyword=DSC-TX30" target="blank">
<img width=234 src="http://www.digitalbuydirect.com/edm/eDM20130516/TX30.png" /></a>
</center>
</td>
</tr>
<tr>
<td height="200" valign="top" >
<font class=product><B>some text</b></font><br><br>
<font class=content>some text</font><br>
<br>
<font class=pricehighlight><B>price</font><BR>
<font class=content><s>other price</s></font>
</td>
</tr>
<tr>
<td align="right" height="50" valign="bottom" >
<a href="http://www.digitalbuydirect.com/index.php?route=product/category&keyword=DSC-TX30" target="blank"><img src="http://www.digitalbuydirect.com/edm/achieve/shopnow_35.png" /> </a></td>
</tr>
</table>

最后，我知道我的代码很复杂，使用多表来控制垂直位置，CSS是我的朋友，但我无法获得右下角的“立即购买”图标站，可点击url 附上它，我发现带有显示块的 CSS 背景图像 url 可能有效，但显示块仍然要求至少 1 个字符，我在图像上买不起。任何提示或方向将不胜感激。

Answer 1

首先，您应该真正清理已弃用的代码。

到目前为止，我所看到的已弃用或不再受支持的内容如下：

<center> - 使用 CSS text-align:center; reference

<font> - 使用另一个元素，例如 <p> 加上 CSS text styling

<td align="right"> - 使用 CSS float:right; reference

<td valign="top"> - 使用 CSS vertical-align:top; reference

至于你的 IE 填充问题，请看this question。我不确定这是否适用，因为您没有在问题中包含您的 CSS，所以我不知道您是如何实现已有的填充的。

至于居中，使用margin:0 auto; 将适用于静态定位的元素。对于绝对或固定位置元素，我这样做：#elementID{width:800px[specify width]; left:-400px[negative half of the width]; margin-left:50%;}