Sub-Pixel Problems in CSS

布卡奇平

布卡奇平

2016-02-20 01:05

下面,图老师小编带您去了解一下Sub-Pixel Problems in CSS,生活就是不断的发现新事物,get新技能~

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

随后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" / 
titleSub-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-contenthttp://img.warting.com/2010/3/1749_003.jpg');}  
#pg{margin:0 auto;width:200px;height:200px;background-image:url('http://webteam.tencent.com/wp-contenthttp://img.warting.com/2010/3/1749_004.jpg');}  
/style 
/head  
  body  
      div id="pg"/div  
  /body  
  /html

展开更多 50%)
分享

猜你喜欢

Sub-Pixel Problems in CSS

Web开发
Sub-Pixel Problems in CSS

Css Hack:Pixel Perfect

Web开发
Css Hack:Pixel Perfect

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Problems with ClusterKnoppix 3.6

Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理
Problems with ClusterKnoppix 3.6

Pixel Battery Saver为智能手机省电

手机软件 应用软件
Pixel Battery Saver为智能手机省电

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

设计师Pixel Junglist 平面设计作品欣赏

平面设计 设计素材
设计师Pixel Junglist 平面设计作品欣赏

用SubRip将sub字幕转成srt格式的方法

电脑入门
用SubRip将sub字幕转成srt格式的方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JS教程:判断滚轮滚动方向在各个浏览器中的表现

JS教程:判断滚轮滚动方向在各个浏览器中的表现

巧用WPS文字绘图工具绘制标准图形

巧用WPS文字绘图工具绘制标准图形
下拉加载更多内容 ↓