对内联文字的疑惑
作者：林小志 来源：林小志博客 时间：2008-04-18 12:19:00
无聊的人在无聊的时间做无聊的事打发自己，结果在无聊的事情中发现了IE对内联文字解释的一些疑惑。以下问题在FF2中没发现，而我也只在IE6 IE7 FF2中测试了。
CSS部分
span {border:1px solid #f00;}
xhtml部分
<span>simsun</span>
<span>宋体</span>
xhtml/css的测试雏形
运行上面的内容可以发现下图的样式，在IE中的表现是上下的边线是没有的。
补充说明一下，在几个朋友的测试下，貌似不同版本的IE解释也会有不同，有些可以正常显示，有些显示跟我的是一样效果。
这个是IE7的版本号：
7.0.5730.11
7.0.6001.18000
当时看到这个问题我首先想到的字体大小跟字体的设置问题，所以对span加上了font-family:"宋体";然后看到的效果是英文是正常显示，而在IE6中中文的显示样式是不同的。
设置了字体解决了一半的问题，那会不会是跟文字大小有关系呢？既然怀疑那就测试一下font-size:12px;结果发现的是问题还是一样保留着，文字是缩小了。
设置了字体大小还是不行，那就再加上行高吧，从line-height:12px;开始调试，一直到line-height:21px;的时候看到文字边框都正常显示了，但是在IE中可以很明显的看到文字的位置有掉下来的感觉。所以呢暂时我放弃了line-height，也因为这个文字位置掉下来的感觉，抱着玩的心态加上了
* {margin:0;padding:0;}
结果发现在FF跟IE中的表现又不一样，原本按理说加上了*后，是对所有的标签都有作用的，但为什么FF顶到页边而IE没有呢，试探性的ctrl+a了一下，结果发现原来文字上面还是有空间存在。难道是传说中的haslayout吗？那就给让IE产生haslayout看看效果怎么样好了。分别span加上了float:left;、zoom:1;、position:relative;结果发现我最初要解决的问题解决了，红色边线出来了。
但刚刚说的页边顶到的问题在加上float:left;也解决了，而zoom:1;和position:relative;并没解决这个问题，但他们的共同点是让IE产生了haslayout，所以红色边线也出来了。既然是haslayout的问题，那跟字体设置没关系了，去掉前面测试的所有内容，最后CSS部分是以下三个中的其中一个了
span {border:1px solid #f00;float:left;}
span {border:1px solid #f00;zoom:1;}
span {border:1px solid #f00;position:relative;}
从上面的图中可以看到，IE虽然跟FF一样也有边框了，但表现还是有所不一样，不过这个不是我今天的疑惑，不鸟他，知道边框为什么不出现就OK了。
PS:在测试的过程发现一下的结构表现是不一样的，换行后IE中间会多一个占位符。
同行
<span>simsun</span><span>宋体</span>
换行
<span>simsun</span>
<span>宋体</span>
0
投稿猜你喜欢
再谈 Web 默认字体
Windows Oracle常见服务介绍
banner字体设计与应用
1亿条数据在PHP中实现Mysql数据库分表100张
前端开发中一些常用技巧总结
介绍讲解MySQL安装下载登录
讨论闭包传入参数：window & undefined
asp如何在聊天室实现趣味答题并计分功能？
CSS 针对 Safari（WebKit）的 CSS 注意事项 3
超越MYSQL，ACCESS复合承载
怎样在GoDaddy-Linux主机上使用JSP连接到MySQL数据库
ASP中正则表达式的应用
SQL Server 数据页缓冲区的内存瓶颈分析
MySQL优化全攻略--相关数据库命令
asp获取文件md5值
MYSQL数据库教程:唯一编号
怎样设计"帮助"最有效?
删除数据库中重复数据的两个方法
将mater库中的系统存储过程批量生成*.sql文件 通用且非常实用
网易网站设计(思想)
