Question

当我的内容的宽度超过<figcaption>兄弟的宽度时，我试图让<img>元素呈现滚动条，通常当内容为长网址或很长的字。

以下代码改编自this answer，适用于IE 11和Edge 15，但不适用于Firefox 55和Chrome 61：

＆＃13;

* {
  outline: 1px solid red;
}

figure {
  display: table;
  max-width: 100%;
}
  
figure img {
  vertical-align: top;
}
  
figure figcaption {
  display: table-caption;
  caption-side: bottom;
  overflow: auto;
}

＆＃13;

<figure>
  <img src="//via.placeholder.com/220x100" alt="">
  <figcaption>Long word in figure caption Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatak</figcaption>
</figure>

＆＃13;

Answer 1

我找到了一个基于此answer的解决方案，我将其应用于原始问题中的代码段：

＆＃13;

* {
  outline: 1px solid red;
}

figure {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  max-width: 100%;
}

figure img {
  height: auto;
  max-width: 100%;
  vertical-align: top;
}

figure figcaption {
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
}

＆＃13;

<figure>
  <img src="//via.placeholder.com/220x100" alt="">
  <figcaption>Long word in figure caption Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatak</figcaption>
</figure>

＆＃13;

当<figcaption>滚动条的内容宽度超过<img/>兄弟的宽度时，使其生成滚动条

1 个答案: