报刊中常用的首字下沉效果

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-23 14:11:40　-　阅:　-　评:0　-　积分:0

说起首字下沉就不得不用到一个伪类，那就是first-letter。(当然方法不拘限于一种，此处略过)说到这里你是不是会像触电一样的想到了ie6下会不会兼容的问题呢？ie6支持的伪类寥寥无几，这是地球人都知道的。那么这个伪类ie6支持不呢？一测便知。源码如下：

在线演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>报刊中常用的首字下沉效果</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
p:first-letter{font-size:36px; float:left}
</style>
</head>
<body>
<p>艺灵设计</p>
</body>
</html>

小伙伴们让准备好，睁大你们的眼睛来目睹这个一直坑爹的让人吐血三千尺的ie6。

怎么样，你是在怀疑自己的眼睛还是在怀疑自己电脑中的ie6还是在怀疑手册盗版呢？笔者翻遍了css3手册，终于找到了答案！

那么这个结论靠谱不呢？还是来操作下吧，将源码进行多敲几个空格，显示如下:

p:first-letter   {font-size:36pxfloat:left;}

效果图：

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-10-23/101.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！