Question

我有一个图像，在底部我想显示一些文字。如果文本不止一行，则文本应扩展到顶部。

<style>
    .image-wrapper td{
         position: relative;
    }

    .image-wrapper td div {
        bottom: 0;
        font-size: 12px;
        line-height: 12px;
        maring: 0 12px;
        position: absolute;
    }

    .image-wrapper td div.left {
        text-align: left
    }

    .image-wrapper td div.right {
        text-align: right;
    }

    .image-wrapper td div.light {
        color: #FFF;
    }

    .image-wrapper td div.dark {
        color: #ddd;
    }

</style>
<table class="image-wrapper">
  <tr>
    <td>
        <img src="img/path/to/img.png">
        <div class="">Text at bottom</div>
    </td>
  </tr>
</table>

结果如下所示：

Chrome，IE 11，Firefox＆gt; = 30：Correct Display Image
Firefox＆lt; 30：Wrong Display

我需要更改什么才能让它正确地查看Firedox＆lt; 30？是可以使用CSS还是我必须使用JavaScript？

问候索伦

Answer 1

问题归结为不支持在表格单元格内定位的HTML / CSS。

许多现代浏览器似乎都增加了支持，但IE等旧版浏览器（可能是Firefox＆lt; 30，不确定）只是不支持它。您可以尝试将div包装在另一个div中，并为包装器提供相对于设置定位上下文的位置，但这有时只能起作用。这是关于该黑客的文章：http://css-tricks.com/absolutely-position-element-within-a-table-cell/。

我建议放弃你的桌子而不是使用基于div的布局。

Firefox底部的文字少于30

1 个答案: