时间戳

首页 > 解决方案 > 是否有“包含：内容；”的替代版本？CSS 属性？

html - 是否有“包含：内容；”的替代版本？CSS 属性？

问题描述

我正在寻找一个替代的contain: content;CSS 属性来兼容旧浏览器。有没有？或者至少有一个CSS技巧吗？

标签： htmlcss

解决方案

这取决于您的contain: content用途，但在某些情况下您可以替换：

overflow: hidden

你会没事的。

这是因为contain: content是 的简写contain: layout paint。

它contain: paint（至少在视觉上）产生了非常相似的结果overflow: hidden。

工作示例：

.outer {
  position: relative;
  float: left;
  margin-right: 12px;
  width: 100px;
  height: 100px;
  background-color: rgb(255, 0, 0);
}

.outer p {
  position: absolute;
  top: 0;
  right: 0;
  margin: 3px;
  padding: 0;
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-weight: bold;
}

.outer-3 {
  contain: content;
}

.outer-4 {
  overflow: hidden;
}

.inner {
  width: 50px;
  height: 50px;
  background-color: rgb(255, 255, 0);
}

.inner-2,
.inner-3,
.inner-4 {
  margin-top: 75px;
}
<div class="outer outer-1">
<p>1</p>
<div class="inner outer-1"></div>
</div>

<div class="outer outer-2">
<p>2</p>
<div class="inner inner-2"></div>
</div>

<div class="outer outer-3">
<p>3</p>
<div class="inner inner-3"></div>
</div>

<div class="outer outer-4">
<p>4</p>
<div class="inner inner-4"></div>
</div>

在上面的例子中：

  1. 外无特殊规定，内无特殊规定margin-top
  2. 外层没有特殊规则，内层有margin-top一个75px
  3. 外有contain: content和内有margin-top一个75px
  4. 外有overflow: hidden和内有margin-top一个75px

延伸阅读：

推荐阅读