四月 22, 2007

关于css的几点

有时候我们会希望某个元素在鼠标指向的时候会有相应的回应,变色或者出现下划线什么的,或者就是变化背景图片------像现在上面这个navbar一样,最开始是给hover指定了另外一个背景图片,但是随后就发现了问题:firefox不会预读取hover的这张图片,鼠标指上去之后才会开始下载,所以背景的变化有延迟.后来找到的解决方法也是很有意思:把hover背景和原先的背景做到一张图片里,然后用background-image:bottom;来控制.
http://farm1.static.flickr.com/229/467904901_03344802b4.jpg,http://www.google.com/accounts/hosted/img/navbar_bg.png,http://www.google.com/accounts/hosted/img/navbar_bg2.png


ie关于容器最糟糕的一点是它会让浮动容器自动延伸,比如这样一个
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
当bc有float属性的时候,ie还是认为容器a的高度是一直延伸到容器c结束,这点符合我们平时的一些常识,但却和标准不符, 让我在初学的时候也是百思不得其解.符合标准的解决方法是给#a加上一个overflow属性,auto或者hidden都可以.



左右浮动之后,需要在后面的元素里清除浮动,clear:both之类,以前怕自己忘记,就在浮动元素完结后建立一个空容器<div style="clear:both;"></div>,这个方法w3c不是很喜欢,违背了内容和样式分离的原则.但是其实有更css的方法,用:after伪类 插入clear:both就可以
发表评论