在线搜索高低,我真的很难找到一个使用CSS的强大的跨浏览器dropcap解决方案。下面的代码在大多数现代浏览器中运行良好,但在MS Edge和IE中的位置略显奇怪。这些浏览器对我们的客户很重要,因此我想尝试在纯CSS中解决这个问题。
我还尝试了一种jquery方法,它包含了span中的第一个字符,但CSS保持不变并且具有相同的问题。
// Drop cap
p {
white-space: pre-wrap;
&:first-of-type {
&:first-letter {
float: left;
font-size: 130px;
line-height: 65px;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 10px;
}
}
}