Tag Archives: 图片

IE对float对象背景图片的渲染错误

这个CSS问题就是在我写这个博客的新皮肤的时候发现的。我简单的测试了一下IE6,IE7,IE8beta1都存在该问题。问题代码如下

  1. <style> 
  2. #sidebar { background:url(http://huangj.in/templates/One%20in%20Spring/img/bottomm.gif) repeat #093;  } 
  3.     #sidebar ul { float:left; } 
  4. .clear {clear:both;} 
  5. </style> 
  6. <div id="sidebar"> 
  7.   <ul> 
  8.     <li>ul1 第一行 长度宽一点点</li> 
  9.     <li>ul1 第二行</li> 
  10.     <li>ul1 第三行</li> 
  11.   </ul> 
  12.   <ul> 
  13.     <li>ul2 第一行</li> 
  14.     <li>ul2 第二行</li> 
  15.     <li>ul2 第三行</li> 
  16.   </ul> 
  17. <div class="clear"></div>   
  18. </div> 

演示地址

http://huangj.in/demo/iefloatbg.html

用宽度较大的浏览器查看这段代码的时候,显示效果正常,背景图片会正常的平铺容器,但是,你尝试缩小浏览器宽度的时候,尤其是宽度无法容下两个ul并列的时候,第二个ul会被挤到第二行,同时,背景图片也被挤到了第二个ul。

你会问到,一般我不会调整浏览器宽度啊,但是,如果你的容器的宽度不足,并且使用float属性,容器会被挤换行,这个BUG出现同样会出现。

解决方法

关于这个问题的解决方法,自己小小测试了一下,可以通过在每组相邻的两个ul之间,插入一个空白的段落<p></p>,或者插入一个&nbsp;,这样问题就解决了。但是加入空白的段落在IE6不知道为什么显示还有有问题,看来IE6只能插入一个可见字符了,比如&nbsp;。

模板制作小总结 – 文字容器随文字长度变化

新模板已经做使用了2天了,使用的过程中,逐渐发现了一些小问题。这里把这些小问题总结一下。

首先不得不说让我心痛的IE,IE对图像的处理能力实在是让我头疼,虽然最后修改了定位的方式解决了页面底部草地的效果。这里说说问题所在。

先是IE给我带来的几个麻烦

第一是IE6的不支持PNG透明的问题,这个大家都知道,就不多说了,第二是关于background的问题。在页面底部先设置了草地图片的repeat,在正常的FF下面,我在其子容器里面放置图片啊,输入框啊,都不会影响底部草地图片,但是在IE6和IE7下,都出现了含图片(或input标签)的子容器挤走父容器的背景图片的情况。结果就导致父容器背景变成了空白,惨不忍睹啊。解决方法,我尚未详细测试和总结,我只是去掉了图像,去掉了部分block属性,以及包含图片(img标签)的容器不要使用float属性。当然,这个是不完整的总结。以后再测试测试这个bug的成因。

然后就说说标题中提到的“文本内容的背景随着文字长度扩展问题”

默认情况下,文本的属性是display:inline;,这样的属性,我们不能够给它设置width和height,甚至padding这个属性都会使该文本产生负偏移。起初使用的是postion:relative;来把负偏移抵消掉。但是这个效果在IE和FF下面显示效果出现了差异,尽量不要使用css hack吧。

第二种想法是使用display:block;来控制padding,这样虽然能够轻松调整文字位置,但是出现了标题中说的问题,块状对象的宽度不能够随着内部文字变化,这个明显不能够符合我最初设计的。

为了不用css hack,又要让容器宽度能够自适应,又一次请教了 Tension 之后,得知,可以直接使用float属性。在使用了float属性之后,这一段文字能够使用padding来调整其边距,并且容器的长宽能够随着文字的增减变化。简直是太完美了。而且这个代码在IE和FF下都显示正常,特别高兴啊!

具体效果就是主页的文章标题部分,大家可以使用firebug来分别测试这三种效果。

十一国庆宅男在家萌一下

宅男们和我一样在家没有事干?不如去萌一下吧~在这里为特别的你推荐一个特别的网站

Geki Moe!!!http://www.gekimoe.org/

Geki Moe!!!里面的萌图真的好多的啊!看得眼花缭乱,大量的同人图,保准有你喜欢的。还不赶快去看一个?如果觉得还不过瘾,就订阅下来吧~天天有PP图片看~让宅的生活有价值!

校内网一个有趣还有先见之明的设定

看图片吧!

这张图片是用校内搜索好友的时候搜索出来的结果页面,下面提示搜索到三个结果,看到没有,上面还专门提示搜到了三个人。更有意思的是,那个居然还是个链接,点了之后,就只显示这三个人。因此我预想(如下图)

在未来,校内搜索出来的可能不仅仅只有人了,可能还有火星人,动物等其他的,可见校内网早就做好了这样的准备啊。

先见之明……

大悲之时,大吉之日

标题还没有水平,我自己都看不懂……亏还是我写的! 

今天好HIGH,在教四上课,上完课出来就发现 

我的刚买的自行车被偷了…………………………偷车未遂! 

检查我的锁,锁都坏了……………………………撬锁也未遂! 

最后决定回寝室,自己的锁自己都打不开………骑车未遂! 

说了那么多,简单说就是,我有两把锁,10块钱的被KO了,15块的那个没有被KO,但是小偷先生直接把他传说中的万能钥匙的半截留在了锁孔里面,这叫郁闷啊……我自己都骑不了! 

四处求救……在门卫那里了解到可以打66110,管治安的哦!一个电话打过去,最近的修车店在桂6,右手提着车,就爬过去了! 

去了之后,发现居然没有修车摊,经过自己寻找,在一个小商店里面找到了修车师傅,运气真好!锯掉了我的好锁之后,车终于解放了! 

总结一下,运气真好 

第一:车没有丢

第二:修车师傅刚要离开的时候,我找到他了!

永远都是那么乐天……今天感觉真不错!附上截图留恋

拆锁过程中……

拆锁工具秀

锁的合影,要有爱

还是要有爱!

出现了!等身大凉宫春日团长!

来源:贪婪大陆

  昨天在メッセサンオー本店门口惊现凉宫春日等身大模型,该模型是为了在2008年1月31日预计在PS2平台上发售的游戏《涼宮ハルヒの戸惑》的预约特典用特别映像毛片版做宣传活动。

  “超·行政部门制片人 凉宫春日等身大模型”以前在东京Game Show上展示过,此次展示是为了做PS2游戏《凉宫春日的户惑》宣传之用,再次拿出来重见天日,并为“团长大人”套上了一个超大的“超エグゼクティブプロデューサー(超·行政部门制片人)”的腕章,并在该模型四周围上互栏表示禁止触摸,引来不少团长FANS留步摄影。

来源:贪婪大陆