如何设置块引用 + 引用的样式，使其看起来像表单字段集 + 图例？

Question

我正在尝试设置 blockquote 和子 cite 元素的样式以复制 fieldset 和 legend 元素的外观，其中字段集周围有边框，图例标签插入边界的顶部——如果你看过一个字段集，你就会明白我的意思。

我有一个解决方案，我给cite 一个背景颜色，但这只有在放置在类似颜色的背景上时才有效。 我需要一个适用于 IE8+ 中所有背景、bg 图片等的解决方案

假设以下标记（不能由此更改。不允许其他元素）：

  <blockquote class="quote">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi 
      facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam 
      delectus. Reiciendis repellat illo, et natus earum odit!
      <cite class="attribution">Mr. Jefferson</cite>
  </blockquote>

我目前拥有的 CSS：

.quote {
  border: 4px solid black;
  padding: 1rem;
  position: relative;
}
.attribution {
  position: absolute;
  top: 0;
  left: 1rem;
  margin-top: -0.65rem;
  padding: 0 1rem;
  background: white; /* this works, but breaks if the background isn't white. I need a solution that works for all possible page bg colors */

}

这是我目前所拥有的：http://jsbin.com/viqegerivi/edit?html,css,output

Answer 1

我不得不承认，我喜欢这个。使用绝对定位的:befores 和:afters，没有触及你的HTML 标记，但正如预期的那样，在CSS 上变得疯狂。干杯！

fieldset {
  border: 4px solid black;
  padding: 1rem 2rem;
}
legend {
  font-style: italic;
  padding: 0 1rem;
}
.quote {
  border-bottom: 4px solid black;
  padding: 2.6rem calc(2rem + 6px) 1rem;
  position: relative;
  overflow: hidden;
  margin: 0;
}
.quote:before,
.quote:after {
  content: ' ';
  position: absolute;
  width: 4px;
  height: 100%;
  background-color: black;
  bottom: 0;
  top: 1rem;
}
.quote:after {
  left: 0;
}
.quote:before {
  right: 0;
}
.attribution {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 2.4rem;
  margin-top: .35rem;
  padding: 0 1rem;
  background: transparent;
}
.attribution:before,
.attribution:after {
  position: absolute;
  content: ' ';
  bottom: calc(50% - 1px);
  height: 4px;
  background-color: black;
  width: 100vw;
}
.attribution:before {
  right: 100%;
}
.attribution:after {
  left: 100%;
}

<p>Desired Look:</p>
<fieldset>
  <legend>Mr. Jefferson</legend>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit!
</fieldset>

<p>What I currently have:</p>
<blockquote class="quote">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit!
  <cite class="attribution">Mr. Jefferson</cite>
</blockquote>

---

编辑：正如 Lister 先生所发现的，这与 fieldbox 标题模型之间存在差异：块引用的背景在 上方（看起来像）top border。

我个人认为这不是一个大问题

1. 可以通过为背景剪辑添加额外的包装器轻松克服它，因此它是可以实现的，但需要稍微复杂的标记。
2. 我不认为很多人会使用与页面背景颜色不同的这个模型。我个人的看法是，这个模型在与透明背景一起使用时看起来最好（这就是我们中断线路的原因，对吧？）。

另外，我为自己设定的最初挑战是在不触及标记的情况下实现效果。

Answer 2

我试过了，效果很好：

html {background:blue}
fieldset {
  border: 4px solid black;
      padding: 1rem 2rem;
}
legend {
  font-style: italic;
  padding: 0 1rem;
}


.quote {
  border: 4px solid black;
  padding: 1rem;
  width:auto;
  margin:0;
  position: relative;
}
.attribution {
  position: absolute;
  top: 0;
  left: 1rem;
  margin-top: -0.65rem;
  padding: 0 1rem;
  background:blue

}