10

我正在尝试在 < p > 元素中创建大的首字母,这些首字母应该从第二行开始并覆盖两行,但在 Firefox 中,第一个字母的位置不符合我的预期(在其他任何地方都可以使用,即使在 IE 中,也只有 FF 会出现问题...... )

http://jsfiddle.net/6SfHG/1/

首字母问题

任何想法如何使它在同一水平上开始?

4

1 回答 1

6

这对我有用,虽然它不是很优雅:

:first-letter因此,要使用垂直对齐的伪元素获得跨浏览器首字下沉效果,您需要应用float: left,然后找到字体大写高度的高度,将 line-height 减小到该值,调整 margin-top 使其在 Firefox 中正确对齐在 Opera 或 WebKit 浏览器中,然后对仅 IE 样式表使用条件注释删除 margin-top 并更改 line-height 以正确垂直对齐类型。

p::first-letter {
  float: left;
  font-family: Georgia, serif;
  font-size: 75px;
  line-height: 60px;
  padding: 3px;
}

http://nickcowie.com/2009/drop-caps-first-letter-and-firefox/

于 2012-05-27T15:53:42.150 回答