我正在尝试在 < p > 元素中创建大的首字母,这些首字母应该从第二行开始并覆盖两行,但在 Firefox 中,第一个字母的位置不符合我的预期(在其他任何地方都可以使用,即使在 IE 中,也只有 FF 会出现问题...... )
任何想法如何使它在同一水平上开始?
我正在尝试在 < p > 元素中创建大的首字母,这些首字母应该从第二行开始并覆盖两行,但在 Firefox 中,第一个字母的位置不符合我的预期(在其他任何地方都可以使用,即使在 IE 中,也只有 FF 会出现问题...... )
任何想法如何使它在同一水平上开始?
这对我有用,虽然它不是很优雅:
: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/