位置：首页>> 网络编程>> 网页设计>> Sub-Pixel Bug?!（2）

Sub-Pixel Bug?!（2）

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

标签：Bug,浏览器,css

以搜集IE BUG闻名的PIE（Position Is Everything）也有一篇《IE Background Positioning Bug》，不过其中的外层元素是固定宽度，对我们用处也不大。同事77总结了两个方法：

切图时body和#pg的图片不要分开，合在一张大图上，然后对body写背景图片居中，图片太大的话则切为多个相同宽度的小图，通过嵌套多个div来写，比如

body大图中间挖空区域多留几个像素，比如现在是200px，切图时为198px，两侧各多留1px

方法1在多数情况下很完美，不过也有某些个案不能使用这种方法；方法2对于body和#pg交界处比较淡化的图片来说非常适合，比如ISD Webteam博客的关于页面，不过有些时候交界处这1px会衔接不自然得非常明显，是我们这些追求完美的页面重构工程师所不能容忍的。下面我们改变点结构来具体分析一下（注：此例为临时用例，下文中提到的body/#pg与之无关）：

<!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, #hd{background-position:center 0;background-repeat:no-repeat;}#pg{background-image:url('/file/UploadPic/20103/24/1749_003-86.jpg');}#hd{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 id="hd"></div></div><button id="sum">+1</button><button id="substruction">-1</button><p>#pg宽度为<strong id="current"></strong>px</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>$(document).ready(function(){ var pg = $('#pg'); var current = $('#current'); function getWidth(){ current.text(pg.width()); } getWidth(); $(window).resize(getWidth); $('#sum').click(function(){ pg.width(pg.width() + 1); getWidth(); }); $('#substruction').click(function(){ pg.width(pg.width() - 1); getWidth(); });})</script></body></html>

通过连续的点击+1/-1按钮可以看出，当#pg宽度>#pg背景图片宽度（400px）且为奇数时，右侧才会出现这1px的空隙

当我们纠结于奇偶数的时候，神奇的

body{margin-left:1px}

出现了，详见《CSS IE one pixel image offset hack》。当设置了body的左外边距为1px时，不管奇偶数都不会出现这个1px的空隙了。不过，当body宽度小于背景大图宽度（这里是400px）且为偶数时，左侧交界处却出现了1px的空隙

看来只有用JS解决了，是当body宽度≥背景大图宽度（这里是400px）时，令body margin-left:1px，<时则去除margin-left:1px 全部代码如下：

<!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');}.fix-bg{margin-left:1px;}</style></head><body> <div id="pg"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>$(document).ready(function(){ var body = $('body'); function fixBg() { (body.width() >= 400) ? body.addClass('fix-bg') : body.removeClass('fix-bg'); } fixBg(); $(window).resize(fixBg);})</script></body></html>

后记

眼看就要圆满了，转念一想：“如果大图宽度是奇数，会出现这个问题吗？如果出现了，那怎么搞捏？” 额…介个，介个…

第一页上一页 1

投稿

Sub-Pixel Bug?!（2）

后记

猜你喜欢