Question

我想在我的iframe中添加一个border-radius，但是它不能在Chrome上运行。我读到需要将iframe包装在div中。

我不想在包装纸中设置高度，而是希望将其调整为iframe高度。

我的风格：

.wrapper {
  border-radius: 20px;
  overflow: hidden;
  background: red;
  overflow: hidden;
  border-radius: 12px;
  height: 120px; /* I DON"T WANT TO SET THE HEIGHT IN THE WRAPPER */
}

iframe {
  border: 0;
  position: fixed;
  top: auto;
  left: auto;
  bottom: 20px;
  right: 20px;
  width: 360px;
  height: 120px;
  box-shadow: 0 4px 23px 0 rgba(0, 0, 0, 0.09);
}

我一直在尝试，但是无法正常工作：https://jsfiddle.net/qas34dum/7/

有什么想法吗？

谢谢！

Answer 1

您需要将定位应用于包装DIV，以便iframe确定尺寸：

.wrapper {
  border-radius: 20px;
  overflow: hidden;
  background: red;
  overflow: hidden;
  border-radius: 12px;
  position: fixed;
  top: auto;
  left: auto;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 4px 23px 0 rgba(0, 0, 0, 0.09);
}

iframe {
  border: 0;
  width: 360px;
  height: 120px;
}

提琴：https://jsfiddle.net/qas34dum/9/

将div高度扩展到其子级（iframe）

1 个答案: