注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> CSS >> 网页设计正文

line-height使文本居中的3像素bug问题

文章来源:蓝色理想 tudou527 作者:佚名 更新时间:2008-3-20 12:54:45 【 】 【加入收藏

虽然题目这么写,可是这真是bug吗?我觉得不算。

line-height使文本居中的3像素bug,先查下这3px的底细,怎么查?观察+FW

先写个height、line-height都为30px,背景为红色的元素,设置文字为12px。然后量下,果然有3px的bug。同时增加或者减少height、line-height 1px发现如果当前值是奇数那1px会加到文字和底部空间里而减少时减掉的是文字和顶部空间的1px(加下减上);为偶数时刚好相反:加上减下。当我们给文字加下划线的时候发现文字的垂直位置并没变,这能说明什么呢?还不太肯定,继续同时减小heighe、line-height直到一个合适的值:14px,这时候我们可以看到文字和下划线都是完整的,继续减小1px。这时IE已经不按我们刚才发现的规矩办事了,文字上面被截去1px,这样看来14px应该是IE认为的一个临界点,此时整体高低减去文字高度刚好为3px。会不会?。。。因为这时文字是顶这上边界的,我们把文字增加到2行,发现了吧,第二行的文字不是顶这第一行的下划线的,而是有1px的距离。3px果然是下划线的高度。

其实这里还有一点特殊的地方就是如果我们一开始把height、line-height都设为31px那这时3px会变为2px。这个可以用我们上面得出的“偶数情况加上减下的结论”解释:heighe、line-height同为30px的时候上下空白区域高度差是3px,然后height、line-height同时加1px,这1px应该是加到上部空间里,所以3pxbug会变成2pxbug。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     Flash AS教程:decorator Pattern
     Flash AS教程:复制粘贴类
     Flash教程:彻底学习RadioButton组件
     Flash AS3教程:动态文本滚动条
     Flash教程:制作随机画圆弧动画
     全Flash动画网站的实现详细教程
     Flash 播放器的安全性设置
     Fireworks8教程:用素材制作炫酷的闪字效果
     Fireworks打造javascript图片提示效果
     Firewoks实例:铅笔图标
    最 新 推 荐
     CSS实例:让页脚保持在未满屏页面的底部
     CSS教程:关于H1的使用技巧
     IE8、IE7、IE6、FF简单的CSS HACK测试
     CSS实例:三列等高布局
     WEB标准学习经验总结
     css网页设计非常有用的解决办法
     IE8.0Beta比较不错的功能:WebSlices
     line-height使文本居中的3像素bug问题
     CSS入门教程:计算CSS盒模型宽和高
     CSS教程:CSS命名参考
    相 关 文 章

    IE8.0Beta比较不错的功能:WebSlices
    IE8的WebSlices
    FireFox支持innerText
    innerHTML,outerHTML,innerText,outerText
    设计中碰到隐藏文字 出现虚线框outline
    CSS控制输入框input悬停交互样式
    仿windows选项卡效果连载3
    仿windows选项卡效果连载2
    仿windows选项卡效果连载1
    HTML表单标记教程(3):输入标记<INPUT>

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用