CSSASS - Part 5

自拍——以站之名

作者：ONEBOYS 发表时间： 2009年02月25号，星期三阅读：168 次

[nggallery id=1]

blog改版，总得弄点有个性的东西吧。可身边又没有帅哥美女，只好拉自己的壮丁，拍几张低俗无趣的pp，以备做网页素材之用了。

标签：摄影
发布在 My life | 没有评论 »

西溪湿地油画展

作者：ONEBOYS 发表时间： 2009年02月13号，星期五阅读：187 次

发布在 My life | 没有评论 »

定位元素间的Z值比较及z-index在不同浏览器下默认值的影响

作者：ONEBOYS 发表时间： 2009年02月7号，星期六阅读：716 次

z-index在ie下缺省为：z-index:0; 而FF下则缺省为：z-index:auto;

（这个结论已然在蓝色的《补遗< 无法冲破的等级> 》这个帖子中得出。而本文的讨论也是对《补遗》的总结及延伸。）阅读这个条目剩下部分 »

标签： position, z-index
发布在 CSS | 没有评论 »

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>absolute未设置top/left时在ie,ff下的一点区别</title> <style type="text/css"> .outer{background:#ccc;width:300px;height:300px;position:relative;} .inner{background:#eee;position:absolute;} </style> </head> <body> <div class="outer"> <span>父级</span> <div class="inner"> <span>子级</span> </div> </div> </body> </html>

在ie下，未设置top/left的absolute元素的效果比较怪异。（“父级”所在的节点是一个inline元素的节点，直接是textNode节点效果也一样）

上面的差别只是个小差别。
下面的这个就有些教育意义了：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ie6,7的绝对定位层的100%尺寸的bug</title> <style> *{padding:0px;margin:0px;} .outer { position:relative; border:10px solid #000; width:150px; height:150px; padding:10px; /* 差别的关键在这 */ } .inner { position:absolute; border:10px solid #f00; width:100%; height:100%; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>

ie6和ie7都有问题，而且还不一样。
width:100%正确的解释，应该是相对于父级的(width+padding)才对。
但ie7未将padding（Y）算入，而ie6则未将padding(X)算入。
这个问题讨论在这里：关于绝对定位元素的宽度100%怎么解释

由此，我们应该注意。当绝对定位层需要设置100%时，其relative父级应弃用padding。

另外，在那个讨论帖里，还提到了另一个问题。但其实是误读的，当时也没仔细看。
其实也没有什么价值，但也不妨一看。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>中间夹一层，小心haslayout</title> <style> *{padding:0;margin:0;} .outer { position:relative; border:10px solid #00f; width:150px; height:150px; padding:10px; /* 关键仍在于此 */ } .inter { background:#ccc; /* zoom:1; 此处如果触发haslayout，问题就复杂了 */ } .inner { position:absolute; border:10px solid #f00; width:100%; height:100%; } </style> </head> <body> <div class="outer"> <div class="inter"> <div class="inner"> </div> </div> </div> </body> </html>

标签： absolute, 兼容
发布在 CSS | 没有评论 »

CSS多类选择符测试

作者：ONEBOYS 发表时间： 2009年02月3号，星期二阅读：219 次

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选择符测试</title> <style type="text/css"> div{display:block;width:400px;height:200px;} #first.son{background:#ccc;} .second.son{border:1px solid red;} </style> </head> <body> <div id="first" class="son first"> a </div> <div id="second" class="son second"> b </div> </body> </html>

形如#first.son的选择符，支持性很好，ie6及以上，ff,opera,safari等浏览器都支持。
形如.second.son的选择符，在ie6下不支持，后一个类名会覆盖前一个类名，即直接识别为.son

其实可以利用第二条情况，作为一个针对ie6的hack来使用：
.xxx.son{} 只要.xxx部分是一个不存在的类名。就可以屏蔽ie6之外的浏览器。只对ie6下的.son有效。
这个hack的效果同 selector{ _property:value; } 大体一致。

标签： hack, 选择符
发布在 CSS | 没有评论 »

ie6下模拟min-width/height的新方法(No Hack)

作者：ONEBOYS 发表时间： 2009年01月20号，星期二阅读：210 次

min/max-width/height这几个属性在ie6里面并不支持。
但是，min-height这个属性的效果却是我们经常会用到的，是以使用的时候就需要在ie6下模拟出此效果。
一般使用的方法如下（使用hack）：
阅读这个条目剩下部分 »

标签： min-height, min-width, 布局
发布在 CSS | 没有评论 »

5 / 16« 首页...«3 456 7 »...尾页 »

CSSASSCSSASSCSSASS

自拍——以站之名

西溪湿地油画展

定位元素间的Z值比较及z-index在不同浏览器下默认值的影响

absolute在ie,ff下的一些区别

CSS多类选择符测试

ie6下模拟min-width/height的新方法(No Hack)