Question

我有一些HTML，如果它本身就在浏览器窗口中就可以呈现。但是，如果我尝试使用一些Javascript魔法将其放入嵌入在另一个页面内的“灯箱”中，则会呈现错误：我在表格单元格中的图像最终会水平扩展（但不是垂直）以填充其表格单元格，尽管事实上，我已经在IMG标签中指定了正确的宽度和高度。这种行为在浏览器中非常一致，所以我假设这是某种“正确”行为，并且必须有某种方法来阻止它，并使图像以其自然大小显示，而不管包含的HTML。

有问题的HTML本身非常简单......基本上是这样的：

<table style='border-collapse:collapse;margin-bottom:10px;margin-left:20px'>

  <tr style=''>
    <td style='text-align:right;'>
      <a href='/master_page/distance_biked_page?simple=1'><img style='border:1px solid #B9B9B9;' src='/user_image/image1.jpg' width='50' height='35'/></a>
    </td> 
    <td style='height:50px;padding-left:10px'> 
      <a href="/master_page/distance_biked_page?simple=1">distance biked page</a> 
    </td> 
  </tr>

  <tr style=''> 
    <td style='text-align:right;'> 
      <a href='/master_page/timetracker_9_page?simple=1'><img style='border:1px solid #B9B9B9;' src='/user_image/image2.jpg' width='42' height='50'/></a> 
    </td> 
    <td style='height:50px;padding-left:10px'> 
      <a href="/master_page/timetracker_9_page?simple=1">time-tracker #9 page</a> 
    </td> 
  </tr> 

</table>

（请注意，当在有问题的“灯箱”上下文中呈现此HTML时，较窄的图像会水平扩展以填充其单元格，而较短的图像不会垂直展开以填充其单元格。）

不是HTML或CSS专家，我对此行为感到非常困惑。可能导致它的任何想法，或者我如何停止它？

Answer 1

检查CSS是否覆盖宽度和高度的样式，例如：

table img {}
table a {}
tr img {}
tr a {}
td img {}
td {}
a img {}
a {}

你有一个压倒一切的高度＆amp;为某个父元素设置的宽度。父元素CSS可以覆盖在HTML中设置的图像宽度和高度，但是如果以这种方式设置则不是：

<img src="x.gif" style="width: 50px;"/>

有你的修复。

图像错误地扩展到填充表格单元格的宽度，但仅限于某些上下文中

1 个答案: