位置：首页>> 网络编程>> 网页设计>> 对内联文字的疑惑

对内联文字的疑惑

作者：林小志　来源：林小志博客　发布时间：2008-04-18 12:19:00　

标签：文字,内联,ie,css

无聊的人在无聊的时间做无聊的事打发自己，结果在无聊的事情中发现了IE对内联文字解释的一些疑惑。以下问题在FF2中没发现，而我也只在IE6 IE7 FF2中测试了。

CSS部分

span {border:1px solid #f00;}

xhtml部分

simsun
宋体

xhtml/css的测试雏形

<!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" /><meta name="Author" content="linxz http://www.linxz.cn" /><title>对内联文字的疑惑</title><style type="text/css">span {border:1px solid #f00;}</style></head><body>simsun宋体</body></html>

运行上面的内容可以发现下图的样式，在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了。

<!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" /><meta name="Author" content="linxz http://www.linxz.cn" /><title>对内联文字的疑惑</title><style type="text/css">span {border:1px solid #f00;float:left;}</style></head><body>simsun宋体</body></html>

PS:在测试的过程发现一下的结构表现是不一样的，换行后IE中间会多一个占位符。

同行

simsun宋体

换行

simsun
宋体

投稿

对内联文字的疑惑

猜你喜欢