浏览器对于含小数值px(像素)解析的差异及小数值如何解决兼容性问题

所属分类: 网页制作 / CSS 阅读数: 535
收藏 0 赞 0 分享
写在前面的唠叨

说到解决兼容性问题,不得不提一下css hack,曾几何时我以会使用几个hack沾沾自喜,后来发现自己真是个vip级别的蠢蛋,会用几个hack只是中级阶段,真正厉害的人要以没有hack同样可以实现复杂页面的兼容性,这才叫厉害。所以后来,苦心研究如何无hack实现各个浏览器兼容性俱佳,最核心的就是布局方式,宜采用流动性布局,亦称自适应布局,我自己总结为三无原则:无浮动,无高度,无宽度。神似于武侠里的无招胜有招,忘记招式才是最高境界一样的道理。好,这个内容很大,洋洋洒洒几万字都说不尽,作罢。我这里就仅仅讲一讲一个可能很多人都没有注意到的浏览器之间的差异,并且如何利用这种差异解决浏览器之间的兼容性问题,这可是个很妙的东西哦,其精神内涵与砒霜治白血病是一致的。

浏览器对于含小数值px(像素)解析的差异

想必很少有人用小数值作为像素值吧。因为像素就是最小的单位了,要么1,2,3,要么就是0,没有什么小数一说的,表现上也不可能存在小数的。确实,很正确,但今天我就是颗螺丝——卯上了,我就要用小数值,怎么样!好,我们一起来看看结果。见下面的对比图:
上面一行是11.9像素大小的文字,下面一行是11.4像素大小的文字,看看各个浏览器下都表现得怎么样:

IE6浏览器下(IE下与此表现一致,避免重复,IE7下图略)

Firefox浏览器下

chrome浏览器下(Safari同内核,同表现)

下面说正题,想必很多做前端的都知道,中文字体规规矩矩显示的下限像素值就是12像素,小于12像素,中文就会有些挤作一团,美感大降。对比上面的图,仔细看,您就会发现,当文字大小11.9像素时,IE6和Firefox等浏览器的表现是不一致的。IE6下显示的是11像素大小的文字效果,而Firefox等w3c标准的浏览器则12像素显示,这就是差异所在,也是本文的关键核心所在。但在12.4像素下,各个浏览器表现都是一致的。

经过我的反复适应以及项目实践,证实了这个IE(IE8未测)与其他浏览器对于小数像素的解析差异:IE对小数像素采取取整的策略,类似于Math.floor属性,就算你大小为11.999999像素,最后还是显示11像素文字的大小(已测试);而Firefox等一些浏览器则采取四舍五入的策略,类似于Math.round属性,11.4像素就表现为11像素,11.5像素就表现为12像素(已测试)。由于平时很少有人用小数值,所以这种差异很少有人注意,所以很少有人关注。然而这个不起眼的浏览器差异有时候却是解决一些兼容性问题的绝妙武器。

补充于2010-07-15
IE8浏览器下对于小数的解析与Firefox,Chrome等浏览器一致。

利用小数解析差异解决浏览器兼容性问题

好,现在我们需要一个存在的兼容性问题。例如,淘宝首页css代码里面有这么一段hack,见下图(图对应淘宝网首页上部搜索选项卡样式):

淘宝首页css一段hack

这段hack是个相差1像素的hack,用“*”表示区分IE和其他浏览器。好,大展身手的时候来了!刚在我们就提过验证过IE和其他浏览器对小数值的解析是有差异的差异的,准确说是小数点后大于5的小数值像素解析是有差异的,而这个差异正好可以解决这里的兼容性问题,于是这个hack就可以一脚踢掉了。直接改成下面的样式就可以了:

复制代码
代码如下:

padding:0 11.9px;

不仅仅缩短的代码的长度,还节省了一个css hack。首先加载文件小了,其次去掉一个hack,资源消耗少了。不用小看这么一点小小的节省,这可是淘宝网的首页,每天的浏览量可是相当惊人的哦!

附上demo实例页面验证结果图放大800倍的对比图,从photoshop上沿标尺可以读出padding值,您可以发现IE6下11像素,而Firefox浏览器下12像素。这与hack达到了同样的功效,但是代码却是没有hack,更简短更简明,更神奇,您不妨也试试!
放大800被后的padding大小对比图

放大800被后的padding大小对比图

小结

虽说这个小数值解决一些兼容性问题很神奇,但是它的缺点也很明显,就是适用范围问题,只能解决相差1像素的浏览器差异,只能解决IE下值小1像素的浏览器差异。
然而,一个技术其实是次要的,关键是想法,创新的想法,我想这要比单纯的会一种技术更为重要!

更多精彩内容其他人还在看

CSS教程:CSS命名参考

在XHTML中定义ID、CLASSS都用得上,主要是方面CSS定义样式时能一眼看穿。所以,CSS命名仅作参考。 (1)页面结构类 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:na
收藏 0 赞 0 分享

CSS教程:控制网页文件大小通过精简CSS实现

尽管对于现如今的带宽来说,网页文件那仅以K来算的大小实在是微不足道,但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。 众所周之,在不影响整个网页构架与功能的情况下,网页文件越小越好,因为更小的网页文件有利于浏览器对网页的解释
收藏 0 赞 0 分享

CSS教程:关于文字溢出问题的研究

首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子,里面提到ie7下出现的文字溢出问题; 于是又重新翻了以前怿飞斑竹的帖子,他提到的是注释引起的文字溢出问题,我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7,所以没有测试),今天看到这个新
收藏 0 赞 0 分享

符合web标准的嵌入Flash的方法

  常有网友提问,如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法,这篇文章中,我们将Flash嵌入标签写入js文件中,通过变量传递参数的办法来回避不符合标准的标签。   请注意,这只是一个变通的方法,换汤不换药,并未能最终解决存在的
收藏 0 赞 0 分享

学习WEB标准必备的四项技能

今天在群里,熊猫君提议整理一个帖子,一方面为初学者提供一个入门指南,另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结,希望抛砖引玉,大家不吝赐教。 1、必备工具 其实web标准并不是很复杂的技术,实现web标准的工具
收藏 0 赞 0 分享

CSS对表格单元格强制换行和不换行

CSS控制Table单元格强制换行与强制不换行   我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。   近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗?   用C
收藏 0 赞 0 分享

CSS制作符合网站标准的细线表格

css教程:实现符合Web标准的细线表格   随着应用CSS网页布局构建网页,   以及web标准的广泛普及与发展,   表格渐渐被人们遗忘,   但是表格还是有它优秀的一面,   数据处理用表格的确省了不少麻烦!   这个是细表格的代码,并且通过了标准验证! tab
收藏 0 赞 0 分享

区分IE6,IE7和firefox的CSS hack

这篇文章主要为介绍了CSS小技巧之有效区分IE6,IE7,Firefox,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS教程:用dl dt dd来制作列表

  今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方:   1、如果用UL还布局,右边一栏比较麻烦;   2、文字外边的边框自适应比较麻烦;   3、很可能要定死高度;   所以,细细地看一看这个布局,想一想还是用DL.DT.DD作
收藏 0 赞 0 分享

性感的CSS菜单(Menus)

当你需要一个简单易用的导航菜单得时候。CSSMenu是个不错的选择。相对于Flash/Javascript,他们小巧轻便,而且方便使用。当然,他们也能做出很多很漂亮的效果。 CssMenuExample 这里有几个专门收集CSS导航菜单的站点,其中有很多优秀的作品。也许能给
收藏 0 赞 0 分享
查看更多