html - 如何完善定位代码？

Question

以下是我在图像上定位文本的代码。要求是:

1. 图像应自动适应屏幕。即使在智能手机上，图像也应该完整显示。不允许仅显示部分图像。
2. 文本应准确定位在我希望的任何位置。

.txtimg{
  position: relative;
  overflow: auto;
  color: #fff;
  border-radius: 5px;
}

.txtimg img{
  max-width: 100%;
  height: auto;
}

.bl, .tl, .br,
.tr{
  margin: 0.5em;
  position: absolute;
}

.bl{
  bottom: 0px;
  left: 0px;
}
.tl{
  top: 0px;
  left: 0px;
}
.br{
  bottom: 0px;
  right: 0px;
}
.tr{
  top: 0px;
  right: 0px;
}

<div class="txtimg">
  
  <img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
  
  <p class="bl">(text to appear at the bottom left of the image)</p>
  <p class="tr"> (text to appear at the top right of the image)</p>

</div>

但是，在我的 firefox 浏览器上，左下角的文本无法完全显示。

通过单击下面的运行代码片段，代码片段在 stackoverflow 中运行良好。

我不知道为什么。我在任何地方找到了解决方案:将 overflow:auto 更改为 overflow:visible。问题将消失。

有什么建议吗？

Answer 1

我无法重现此特定代码的问题，但我知道问题所在。只需在图像上添加垂直对齐。

.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}

这也是这样工作的:

.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}