• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 浏览器对于含小数值px(像素)解析的差异及小数值如何解决兼容性问题

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含兼容性,小数等相关知识,佚名 希望在学习及工作中可以帮助到您
写在前面的唠叨

说到解决兼容性问题,不得不提一下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就可以一脚踢掉了。直接改成下面的样式就可以了:

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

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

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

小结

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

您可能想查找下面的文章:

  • 详解CSS3浏览器兼容
  • IE6下兼容性常见的几个问题与解决方法
  • 浅谈浏览器的兼容性(必看篇)
  • 浏览器hack总结 详细的浏览器兼容性的快速解决方法
  • 关于css兼容性问题及一些常见问题汇总
  • IE兼容性问题的快速解决方法_ajax请求不发送到后台
  • 2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼
  • 页面在360浏览器下显示不正常的兼容性问题
  • 火狐和谷歌兼容性问题示例探讨
  • CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

相关文章

  • 2017-08-06常见浏览器兼容性问题与解决方案css篇
  • 2017-08-06CSS 星级评价效果代码
  • 2017-08-06CSS常用代码小集
  • 2017-08-06CSS3之背景尺寸Background-size使用介绍
  • 2017-08-06Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
  • 2017-08-06ie下没有背景色bug的解决方法
  • 2017-08-06CSS强制性换行的方法区别详解
  • 2017-08-06CSS3实现千变万化的文字阴影text-shadow效果设计
  • 2017-08-06css line-height属性的使用技巧
  • 2017-08-06Div设置最小宽度(有浮动元素或浏览器宽度小于1350之后)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 纯css的accordion效果(代码分享)
    • 在HTML5中你如何使用CSS建立不可选的文字
    • div 的边框显示不同效果示例代码
    • 利用CSS定位背景图片的常用方法总结
    • 对于一些css样式的巧妙方法进行总结(推荐)
    • Web页面中八种创建多列等高(等高列布局)的实现技术
    • CSS3之背景尺寸Background-size使用介绍
    • CSS外边距合并代码
    • IE7、IE8、ff下的margin-top问题 折叠margin
    • CSS3 Flexbox中flex-shrink属性的用法示例介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有