css - 缩写 - CSS :first-letter over two lines

标签 css firefox pseudo-element

我正在尝试在

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

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

First letter problem

有什么想法可以让它从同一水平开始吗?

最佳答案

这对我有用,尽管它不是很优雅:

So to get a cross browser drop cap effect using :first-letter pseudo-element that ver­tic­ally aligns, you need to apply float: left, then find the height of the typeface cap height, reduce the line-height to that, adjust margin-top so it aligns cor­rectly in Fire­fox and in Opera or a Web­Kit browser, and then using con­di­tional com­ments for an IE only stylesheet remove margin-top and change line-height to cor­rectly ver­tic­ally align the type.

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/

关于css - 缩写 - CSS :first-letter over two lines,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10775189/

相关文章:

css - jQuery slider 后面出现的 CSS 下拉菜单的 Z-index 问题

javascript - Chrome 版本 61 为 document.documentElement.scrollHeight 返回不同的结果

java - 检查 Firefox 配置文件,如果不存在则使用 Java 创建

javascript - Mozilla 中的缩放元素无法正常工作

css - 使用 :after CSS pseudo-element without inserting content

css - 使用伪元素绘制双线

html - 如何让我的 flexbox 与我的布局一起工作,我的侧边栏仍然卡在底部

jquery - 如何在加载文档后附加的模态输入中实现 jQuery UI 自动完成功能?

Javascript 函数仅在 Firefox 上运行一次

CSS :before on inline SVG