• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS first-letter伪类元素的特点

CSS first-letter伪类元素的特点

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含first-letter等相关知识,佚名 希望在学习及工作中可以帮助到您

有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。

由于这句存在误解的可能性(我就误解了他的意思),振之在第一时间就删除这句话。他的意思准确地说,是:first-letter这个伪类无法向下“继承”。例如:

叼着烟斗的名侦探说过:“除掉所有不可能的,留下来的,无论多么不合理,但它就是真相......!”是的,真相就是IE8 beta1不支持:first-letter(还有:first-line)。我希望这是beta1版本中的一处来不及修复的bug,因为在微软官方的IE5~IE8 CSS兼容表中,明确的标明了出去IE5不支持:first-letter外,其他版本一律支持。这一点,在许多博客中都被提及,例如怿飞的IE8 beta1 中的 CSS 属性。

如果你的兼容性检查列表中还没有IE8的名字,如果你觉得诸如首字下沉这样的额外视觉效果可有可无,那么你可以在这一行结束浏览了。但,如果你执着于此,希望IE8的用户也可以在你的网页上看到类似于报刊文章上的效果,你可以往下看。

在多次努力之后,我放弃折腾那可怜的css,IE8b1对于:first-letter的不支持,不是在css hack层面能解决的。我们只能求助于js。我们需要找到一个页面中第一个段落开始的地方,找到这个段落第一个字,让js将其处理为特殊样式:


接下来,我们只需要在css中这样定义:

因此,我们需要改动一下css:

说实话,我并不推荐使用如此繁复的代码(效果页面2和3)实现一个首字下沉。就好像在html中不推荐使用<q></q>那样。直接使用效果页面1的代码,让js去做这个在IE中找不到平衡点的事情——js开启,大家都有同样的效果;js关闭,效果也一起消失。因为它不仅使得IE8可以应用首字下沉的效果,也避免了其他版本IE在对:first-child:first-letter这样的一个css应用上的处理差异(直接使用:first-letter会让每个段落开头都有一个首字下沉效果,这也是为什么振之在他的博客正文中不使用这个效果的原因)。

上帝保佑,IE8正式推出的时候可以支持:first-child(还有:first-line)。

您可能想查找下面的文章:

相关文章

  • 2017-08-06图片在div中垂直和水平同时对齐的实现方法
  • 2017-08-06CSS3常用的几种颜色渐变模式总结
  • 2017-08-06网页设计基础教程(二):主题篇
  • 2017-12-31老版本浏览器兼容,css2学习
  • 2017-08-06CSS中单位px与em的区别(推荐)
  • 2017-08-06IE下去掉iframe边框兼容IE7\IE8\IE6以下
  • 2017-08-06IE兼容css3圆角的实现代码
  • 2017-08-06CSS 平级和儿子级样式写法示例
  • 2017-08-06Less里css表达式的写法示例介绍
  • 2017-08-06css 相对定位 绝对定位 浮动 分析

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 在IE6,7中遇到未知的问题无法解决时可以尝试触发其layout
    • 在IE8 FF中使用padding设置select控件文字垂直居中
    • css背景应用中的repeat-x与repeat-y各是什么意思
    • 设计一个带选择和提示功能的检索框(分步介绍)
    • DIV半透明代码 兼容主流浏览器
    • CSS 网站性能优化笔记
    • 纯CSS写的选项卡效果
    • 关于select标签的高度设置在ie6/ie7下兼容心得
    • DOCTYPE 中xhtml 1.0和 html 4.01区别分析
    • div+css通用兼容性代码整理

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有