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

我必须承认，我很喜欢这个。使用绝对定位的:before和:after s，没有触及您的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标题模型之间存在差异：blockquote的背景高于（看起来像是什么）top border。

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

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

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

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

}

如何设置blockquote +引用看起来像formsetset + legend？

2 个答案: