css Sub

日期:2021-03-13 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

jQuery之父John Resig写过1篇《Sub-Pixel Problems in CSS》,1个50px宽的div中有4个float的div,每一个宽25%,但是各个访问器对50*25%的了解一些纠结(demo):

接着Steven Wittens的《CSS Sub-pixel Background Misalignments》,检测了固定不动宽度的元素水平垂直居中时父元素情况照片垂直居中的差别,更让大家看到头晕眼花(demo):

令人烦闷的是:不止IE,各访问器的不一样版本号也是有一丝差别… 还好,实际工作中中非常少会碰到这类情况,遇到了也只是1个相对性简易的情况,较为典型的运用情景是:一些QQ会员主题活动类的网页页面,情况1幅很宽敞宏大的1280px大图垂直居中,正中间地区980px垂直居中,1024辨别率下980px外的一部分能显示信息是多少就显示信息是多少,不出現横向翻转条,超过1024的辨别率则大图所有显示信息。 下面看来个简易的demo(以便便捷发现及总结难题,外围大图宽400px(对应上面的1280px),正中间200px掏空(对应上面的980px),正中间图宽200px):

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta content="text/html; charset=utf⑻" http-equiv="Content-Type" />  
  6. <title>Sub-Pixel</title>  
  7. <style type="text/css">  
  8. body, div, p{margin:0;padding:0;}   
  9. body{text-align:center;}   
  10. button{margin:1em;padding:0 1em;}   
  11. #pg, body{background-position:center 0;background-repeat:no-repeat;}   
  12. body{background-image:url('http://webteam.tencent.com/wp-content/uploads/2010/3/1749_003.jpg');}   
  13. #pg{margin:0 auto;width:200px;height:200px;background-image:url('http://webteam.tencent.com/wp-content/uploads/2010/3/1749_004.jpg');}   
  14. </style>  
  15. </head>  
  16.   
  17. <body>  
  18.   
  19.     <div id="pg"></div>  
  20.   
  21. </body>  
  22.   
  23. </html>  

拖拽访问器边沿更改访问器对话框的宽度,能够看到在一些情况下body和#pg在右边的交界处处会有1px的间隙,这个难题存在于IE6/Chrome3/Safari4中。 以收集IE BUG出名的PIE(Position Is Everything)也是有1篇《IE Background Positioning Bug》,但是在其中的外层元素是固定不动宽度,对大家用途也不大。朋友77总结了两个方式:

  1. 切图时body和#pg的照片不必分开,合在1张大图上,随后对body写情况照片垂直居中,照片太大的话则切为好几个同样宽度的小图,根据嵌套循环好几个div来写,例如


拷贝编码
编码以下:

<div class="bg1">
<div class="bg2">
<div class="bg3">
<div id="pg"></div>
</div>
</div>
</div>

  1. body大图正中间挖空地区多留几个像素,例如如今是200px,切图时为198px,两边各多留1px

方式1在大部分状况下很完善,但是也是有一些个案不可以应用这类方式;方式2针对body和#pg交界处处较为淡化的照片来讲十分合适,例如ISD Webteamblog的有关网页页面,但是一些情况下交界处处这1px会对接不当然得十分显著,是大家这些追求完美完善的网页页面重构工程项目师所不可以容忍的。 下面大家更改点构造来实际剖析1下(注:此例为临时性测试用例,下文中提到的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⑻" 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('http://webteam.tencent.com/wp-content/uploads/2010/3/1749_003.jpg');}
#hd{margin:0 auto;width:200px;height:200px;background-image:url('http://webteam.tencent.com/wp-content/uploads/2010/3/1749_004.jpg');}
</style>
</head>
<body>
<div id="pg">
<div id="hd"></div>
</div>
<button id="sum">+1</button><button id="substruction">⑴</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/⑴按钮能够看出,当#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⑻" 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('http://webteam.tencent.com/wp-content/uploads/2010/3/1749_003.jpg');}
#pg{margin:0 auto;width:200px;height:200px;background-image:url('http://webteam.tencent.com/wp-content/uploads/2010/3/1749_004.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想:“假如大图宽度是单数,会出現这个难题吗?假如出現了,那如何搞捏?” 额…介个,介个…