css行高:line-height属性详解(4)
作者:ddcatlee 来源:猫沙盆 时间:2008-06-24 11:42:00
7.3.4 浏览器的差别与错误
浏览器在显示的时候往往会有自己的表现形式,例如在Opera内,行高将按照CSS定义的将行距除以2增加到内容区域的上下两边,而IE和Firefox则不是完全平分,如图7-29所示。
图7-29 不同浏览器对行高的显示
不过,相差的1至2个像素在实际显示中一般不会有太大的影响,因此可以忽略不计。 比较严重的错误是IE 6.0对于含有图片或者表单元等可替换行内元素的行高失效的问题,不过,在IE 7.0中已经修正了这个错误,但是其表现同其它浏览器也不相同。
例如有如下代码,其显示如图7-30所示。
#lineHeight4 p { line-height : 60px; } #lineHeight4 fieldset{ border : 0; } <div id="lineHeight4"> <p>内容含有图片在[IE 6]内浏览line-height将失效。<img src="../../img/ddcat_anim.gif" alt="图片" width="88" height="31" /></p> <form id="testForm" action="#"> <fieldset> <p><label for="test1">表单元素</label>< input type="text" maxlength="16" value="IE6内行高失效" /></p> </fieldset> </form> </div>
图7-30 包含替换元素的行高在IE内失效
由图7-30读者可以发现,IE 7.0中,将半行距分别加在了图片的上下,而由于图片默认是基线对齐,因此文字的基线下移了,这显然不符合CSS中的规定。 对于IE 6.0中行高失效的问题,需要使用CSS Hack手段来针对IE 6.0设定替换元素的上下补白来修正。 提示:关于针对IE 6的CSS Hack,请参见本书[第16章:浏览器与Hack]。
标签:line-height,行高,文字,css
0
投稿
猜你喜欢
.net连接Mysql封装类代码 可直接调用
2024-01-14 15:16:16
asp下过滤非法的SQL字符的函数代码
2011-03-03 11:23:00
Sqlserver 2005使用XML一次更新多条记录的方法
2024-01-28 19:50:04
Python手绘可视化工具cutecharts使用实例
2022-12-25 07:27:54
js使用栈来实现10进制转8进制与取除数及余数
2024-04-19 09:52:12
MySQL中or语句用法示例
2024-01-17 17:21:46
详解Python pygame安装过程笔记
2023-07-24 12:20:36
Elasticsearch属性单词常用解析说明
2023-06-12 14:47:36
关于MySQL的体系结构及存储引擎图解
2024-01-20 14:52:46
python性能测试对手机号绑定进行压测
2021-09-29 12:17:00
Python中使用gflags实例及原理解析
2023-01-28 20:25:24
vue使用iframe嵌入网页的示例代码
2024-05-05 09:12:04
PHP结构型模式之装饰器模式
2023-05-30 08:43:07
解决pip安装的第三方包在PyCharm无法导入的问题
2022-10-18 11:20:27
EXCEL数据上传到SQL SERVER中的简单实现方法
2024-01-27 15:28:06
win10下tensorflow和matplotlib安装教程
2023-03-23 21:47:27
Python数据可视化之Seaborn的使用详解
2022-10-25 21:57:31
python-opencv实现视频指定帧数间隔图像的保存功能
2021-05-28 16:51:50
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2024-04-19 10:02:23
Python for循环通过序列索引迭代过程解析
2021-11-30 05:36:50