Question

我对CSS width/height of IMG and TD提出的问题提出了类似的问题。主要区别在于，提出的解决方案是在css中定义表维度。这个解决方案对我不起作用，因为每个td都不同。

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

当我们将Adobe生成的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;
}

以下是Adobe生成的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元素？

提前非常感谢。凯特

具有可变大小的IMG和TD的CSS宽度/高度

0 个答案: