1

我有一个与IMG 和 TD 的 CSS 宽度/高度问题非常相似的问题。主要区别在于，提出的解决方案是在 css 中定义表格尺寸。这个解决方案对我不起作用，因为每个 td 都是不同的。

当我们使用切片制作图像时，Adobe 会为此生成 html。因此，每个表格单元格都被定义为与其包含的图像切片完全相同的大小。图像非常复杂，因此我们不可能手动完成。

当我们将 Adob​​e 生成的 html 加载到浏览器中时，它可以正常工作，但是，当我们将其集成到现有项目中时，td 元素会改变尺寸。使用开发工具检查它们显示添加了高度和宽度，但检查所有样式元素（包括继承元素），我们看不到任何填充、边距或边框。即使我们明确地将 td 定义为与其包含的图像相同的宽度和高度，我们仍然可以获得额外的空间。

以下是 Firebug 告诉我们正在影响 td 的样式。他们是：

element.style {
   visibility: visible;
   margin: 0;
   padding: 0;
}

body {
   font-size: 12px;
   color: #3c1a1a;
   font-family: Georgia;
}

.slide {
   list-style: disc outside none;
}

.TL {
   border-collapse: separate;
   background: none repeat scroll 0 0 transparent;
   border: 0 none;
   border-spacing: 0;
}

以下是影响 img 的样式（由于继承而重复了很多 td 样式）：

element.style {
   visibility: visible;
}

body {
   font-size: 12px;
   font-family: Georgia;
   color: #3c1a1a;
}

.slide {
   list-style: disc outside none;

.TL {
   background: none repeat scroll 0 0 transparent;
   border: 0 none;
   padding: 0;
   border-collapse: separate;
}

以下是 Adob​​e 生成的 html 示例：

<table class="override" id="Table_02" width="470" height="628" border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td colspan="15" style="padding: 0px; margin: 0px;">
        <img class="TL" src="Images/Map1/map/Interactive-Map_01.gif" width="449" height="56" alt="Location of Cairo">
     </td>
     <td>
        <img class="TL" src="Images/Map1/map/spacer.gif" width="1" height="56" alt="just a spacer">
     </td>
   </tr>

我一辈子都看不到这些规则是如何增加额外维度的，但不可否认的是，它们确实存在，我们很酷的交互式地图在其中有很大的差距。谁能提出为什么这个额外的空间可能会添加到我们的 td 元素中？

提前非常感谢。凯特

4

0 回答 0