Sub-Pixel Bug?!

作者：YT 来源：ISD Webteam 时间：2010-03-24 18:09:00　

jQuery之父John Resig写过一篇《Sub-Pixel Problems in CSS》，一个50px宽的div中有4个float的div，每个宽25％，然而各个浏览器对50*25％的理解有些纠结（demo）：

随后Steven Wittens的《CSS Sub-pixel Background Misalignments》，测试了固定宽度的元素水平居中时父元素背景图片居中的差异，更让我们看到眼花（demo）：

让人郁闷的是：不止IE，各浏览器的不同版本也有些许差异… 还好，现实工作中很少会碰到这种情形，遇到了也只是一个相对简单的情形，比较典型的应用场景是：某些QQ会员活动类的页面，背景一幅很宽大宏伟的1280px大图居中，中间区域980px居中，1024分辨率下980px外的部分能显示多少就显示多少，不出现横向滚动条，大于1024的分辨率则大图全部显示。

下面来看个简单的demo（为了方便发现及总结问题，外围大图宽400px（对应上面的1280px），中间200px掏空（对应上面的980px），中间图宽200px）：

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Sub-Pixel</title><style type="text/css">body, div, p{margin:0;padding:0;}body{text-align:center;}button{margin:1em;padding:0 1em;}#pg, body{background-position:center 0;background-repeat:no-repeat;}body{background-image:url('/file/UploadPic/20103/24/1749_003-86.jpg');}#pg{margin:0 auto;width:200px;height:200px;background-image:url('/file/UploadPic/20103/24/1749_004-48.jpg');}</style></head><body> <div id="pg"></div></body></html>

拖动浏览器边缘改变浏览器窗口的宽度，可以看到在某些时候body和#pg在右侧的交界处会有1px的空隙，这个问题存在于IE6/Chrome3/Safari4中。

2 下一页

标签：Bug,浏览器,css

投稿

Sub-Pixel Bug?!

猜你喜欢

Go语言基础go fmt命令使用示例详解

MySQL数据库高级数据操作之新增数据

通过遮罩层实现浮层DIV登录的js代码

Python数据分析之Python和Selenium爬取BOSS直聘岗位

python获取array中指定元素的示例

Mybatis应用mysql存储过程查询数据实例

成功的用户界面的八个特性[译]

Django实现图片上传功能步骤解析

JS严格模式知识点总结

python实现复制大量文件功能

关于Python中浮点数精度处理的技巧总结

解决mac使用homebrew安装MySQL无法登陆问题

使用python画个小猪佩奇的示例代码

详解如何运行vue项目

使用python将excel数据导入数据库过程详解

Python 20行简单实现有道在线翻译的详解

Python reflect单例模式反射各个函数

node.js使用免费的阿里云ip查询获取ip所在地【推荐】

Python实现以时间换空间的缓存替换算法

用python实现操纵mysql数据库插入