十四像素

利用box-sizing实现div仿框架

11月 21st, 2009

29 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系统：Windows]

先看代码：

提示：你可以先修改部分代码再运行。

原理大概就是这样的：

千言万语抵不过一副画，通过整容前后的对比，大家应该能看出box-sizing:border-box的作用了。

了解box-sizing的同学们应该知道，它来自离微国比较遥远的css3世界，因此IE6/IE7是不支持的，但我很负责任滴说：本demo正常兼容IE6/IE7。

因为……

IE6/IE7下，<html>的box-sizing默认值本就是border-box（注：IE7有一点点不正常，overflow:hidden后神志有所恢复，将不影响本demo正常运作）。

现在的问题就是是不是要采用这个方法了，给点优劣的对比，大家自行斟酌吧：

比较使用绝对定位的方法来实现，这个方法在目前主要存在两个优势：

针对每种浏览器基本使用的同一方法，css代码简单，易修改、易理解。
兼容。绝对定位的方法在OP10下存在暂时找不着修复bug的办法，只好绕个弯走了。

它最大的劣势就是欠灵活，如果没有IE6，我想我是坚决选择绝对定位的方法的。

以下为应用实例demo。

提示：你可以先修改部分代码再运行。

一个应注意的问题：

不要给body以overflow:hidden，它将会无情地隐藏掉任何在它以外的任何东西，包括top/bottom（header/footer）；

一个应理解的要点：

[100%+(N)px] 的高度产生的方法：div { height:100%; padding-top:(N)px;}。

Chomo xhtml+css css3, frame, xhtml+css

inline-block对象间的缝隙

11月 7th, 2009

11 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3.5 / OP10 / SF4 / Chrome2 ]
[操作系统：Windows]

inline-block用于块对象的横向排列（如图片组），其有着一些float不可替代的作用（如不错位、可垂直居中等），但在实际应用中，还是存在一个很纠结的弊端——有缝：

提示：你可以先修改部分代码再运行。

通常情况下，我们需要inline-block的元素是块对象：

提示：你可以先修改部分代码再运行。

大家可以看到缝隙大小不一，而且当对象是块对象时，IE6/7因为是模拟的inline-block，完全没有缝隙。

经肉眼观察和肉手测试，发现这个该死的缝隙与字体和文字大小密切相关，故提供灭缝方法如下：

对象为内联对象时：

提示：你可以先修改部分代码再运行。

对象为块对象时：

提示：你可以先修改部分代码再运行。

在这里回答一个疑问，既然是与字体大小相关，那为什么不直接使用font-size:0，然后在子对象上再进行大小恢复呢？
答：因为即使这样设置了safari和chrome以及为块对象时的ie6和ie7还是有1px的问题，要单独hack，忒麻烦。

总结一下，关键几点：

1. 缝隙的宽度与文字大小相关，你可以把缝隙看作一个文本节点，字越大，缝越大。
2. 这个文本节点是由于换行产生的，故，如果span和span之间或li与li之间不存在换行，那就没必要这么罗嗦了。（为了美丽的排版，我相信多数人会选择换行的）
3. 示例中采用了font-family:simsun，这是因为宋体是等宽字体，这样各浏览器对这个文本节点的宽度就很一致了：0.5em。

Chomo xhtml+css inline-block, xhtml+css

全屏屏蔽、自动居中的lightBox

7月 23rd, 2009

6 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2 ]
[操作系统：Windows]

本教程旨在实现lightBox时的样式与行为分离，减少JS在各方面（全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等）的工作。

先上代码：

<!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" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>全屏屏蔽、自动居中的lightBox</title> <style type="text/css"> * { margin:0; padding:0; } html,body { height:100%; overflow:hidden; font:12px/1.5 simsun;} .myPage { line-height:3; overflow:auto; width:100%; height:100%;} .lightBox, .popupCover, .popupIframe, .popupComponent { position:absolute; left:0; top:0; width:100%; height:100%;} .popupComponent { z-index:2; display:none;} .popupIframe { display:none; _display:block; _filter:alpha(opacity=0);} .popupCover { background:#000; opacity:0.7; *filter:alpha(opacity=70);} .lightBox { text-align:center; overflow:auto;} .lightBoxContent { display:inline-block; *display:inline; zoom:1; width:300px; padding:10px; background:#fff; border:5px solid #00b4ff; vertical-align:middle;} .lightBoxMaxHeight { display:inline-block; vertical-align:middle; height:100%; *height:99.5%; width:1px; overflow:hidden; margin-left:-1px;} .lightBoxWrapper { display:inline-block; *display:inline; zoom:1; text-align:left;} .lightBoxClose { color:#f00;} .lightBoxSubmit { margin-top:10px; padding-top:5px; border-top:1px solid #ccc;} .lightBoxSubmit input { font-size:12px; padding:0 10px; overflow:visible; margin:0 5px;} </style> </head> <body> <div class="popupComponent" id="lightBox"> <iframe class="popupIframe"></iframe> <div class="popupCover"></div> <div class="lightBox"> <span class="lightBoxMaxHeight"></span> <div class="lightBoxContent"> <div class="lightBoxWrapper"> 当提示小于一行时文字居中<br /> </div> <div class="lightBoxSubmit"> <input type="button" value="确定" onclick="hideLayer('lightBox')" /> <input type="button" value="取消" onclick="hideLayer('lightBox')" /> </div> </div> </div> </div> <div class="popupComponent" id="lightBox2"> <iframe class="popupIframe"></iframe> <div class="popupCover"></div> <div class="lightBox"> <div class="lightBoxContent"> <div class="lightBoxWrapper"> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> 当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度当内容已经超过了一屏的高度<br /> </div> <div class="lightBoxSubmit"> <input type="button" value="确定" onclick="hideLayer('lightBox2')" /> <input type="button" value="取消" onclick="hideLayer('lightBox2')" /> </div> </div> <span class="lightBoxMaxHeight"></span> </div> </div> <div class="myPage"> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> <div style="text-align:center;"><input type="button" value="位于第一屏的按钮" onclick="showLayer('lightBox')" /></div> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> <select><option>一个用于测试IE6中是否能覆盖住的select</option></select><br /> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> <select><option>又一个用于测试IE6中是否能覆盖住的select</option></select><br /> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> <div style="text-align:center;"><input type="button" value="位于第二屏中的按钮" onclick="showLayer('lightBox')" /><input type="button" value="当内容已经超过了一屏的高度" onclick="showLayer('lightBox2')" /></div> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> 假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br />假装很丰富的内容<br /> </div> <script> function showLayer(id) { document.getElementById(id).style.display = "block"; } function hideLayer(id) { document.getElementById(id).style.display = "none"; } </script> </body> </html>

提示：你可以先修改部分代码再运行。

这个lightBox具备以下特性，大家可以通过修改代码测一测 ^-^：
1. 在页面中任意一位置点开，均能完美遮屏（此时无法直接控制包括滚动条在内的任意元素），IE6中无须隐藏即能遮蔽select元素（iframe遮蔽法的缺陷：遮蔽后，如果拖动滚动条，select仍会移至顶层）。
2. lightBox的高度自适应其内容，并呈现完美的居中状态。
3. 内容为单行时，居中显示；内容为多行时，居左显示；内容高度使lightBox超过屏高时呈现滚动条，并居顶显示，读者能完整阅读。

如有兴趣，构成这个lightBox的以下小技巧可供您参详：

1. 全屏遮蔽的方法：

A. 隐藏html/body的滚动条。
B. 用一个div做遮罩，再用一个div做带有滚动条的页面，一个叠上面，一个叠下面。

提示：你可以先修改部分代码再运行。

2. 单行居中，多行居左的方法（看demo吧，表述能力有限）：

提示：你可以先修改部分代码再运行。

3. 使用inline-block实现未知高度垂直居中的方法（看图和demo吧，表述能力有限）：

图示：
使用inline-block实现未知高度垂直居中的方法

代码演示：

提示：你可以先修改部分代码再运行。

存在的两个细节性问题：
1. 大家可以看到完整demo中并未出现font-size:0;，而在垂直居中法中却出现了。
因为font-size:0在完整demo中，将使firefox3.5中读者完整阅读时lightBox的鼠标滚轮失效，原因不详，这一点大家可以作情处理。
2. maxHeight这东西只能放在lightBoxContent的后面，因为在opera9.6中会出现bug，囧。

Chomo xhtml+css lightBox, xhtml+css

在ie6下实现position-fixed的效果

5月 27th, 2009

7 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

我喜欢position:fixed，它很酷。
但ie6总不支持它，所以用其他的属性来模拟（这个模拟在主流浏览器中都兼容，所以其他浏览器也不需要分开写position:fixed了）。
看效果先：

<!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" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>模拟position:fixed</title> </head> <style> * { padding:0; margin:0;} body { height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;} html { height:100%; overflow:hidden;} .fixed { position:absolute; top:10px; left:10px; width:200px; height:350px; background:#fc0; border:1px solid #f60;} .wrapper { height:100%; overflow:auto;} .body { padding-top:10px; margin-left:232px;} </style> <body> <div class="fixed">滚动条就算蹦达出窗口它都不会动的</div> <div class="wrapper"> <div class="body"> [专业 » 产业观察] 彩虹显IP怕成被告？TX给彩虹暗示？ jarry 2008-11-17 <br /> [专业 » 产业观察] 上海东楼Kappa女：互联网的作用＝炒作？ jarry 2008-11-13 <br /> [专业 » 产业观察] 全球性商务人脉网络平台：XING.com jarry 2008-11-1 <br /> [专业 » 产业观察] 什么是口碑营销？ jarry 2008-10-17 <br /> [专业 » 产业观察] 第二届 Open Web 大赛开幕 jarry 2008-10-16 <br /> [专业 » 产业观察] 百度有啊C2C网络交易平台即将上线 jarry 2008-10-12 <br /> [专业 » 产业观察] 首款谷歌Android手机高调上市 jarry 2008-10-10 <br /> [专业 » 产业观察] 七个获得订阅用户的黑色真理 jarry 2008-10-8 <br /> [专业 » 产业观察] 靠写博客赚钱的五个必要条件 jarry 2008-10-7 <br /> [专业 » 产业观察] Windows Live Messenger 9 Wave3 最终发布日期确定 jarry 2008-10-6 <br /> [专业 » 产业观察] 2008中国互联网大会昨日开幕 jarry 2008-9-24 <br /> [专业 » 产业观察] 有道热闻上线！ jarry 2008-9-19 <br /> [专业 » 产业观察] Phpcms 2008 测试版9月1日开源免费发布 jarry 2008-9-17 <br /> [专业 » 产业观察] 电脑报介绍的adobe air应用 jarry 2008-9-10 <br /> [专业 » 产业观察] WordCamp China 2008即将召开 jarry 2008-8-28 <br /> [专业 » 产业观察] 开发硬件防火墙的主要步骤 jarry 2008-8-11 <br /> [专业 » 产业观察] 细数20个Windows 7应该拥有的功能 - Windows 7之家--iWindows7.com jarry 2008-8-6 <br /> [专业 » 产业观察] 互联网运营者和互联网评论者 jarry 2008-6-22 <br /> [专业 » 产业观察] 有趣的BlogBus暂停服务提示 jarry 2008-6-12 <br /> [专业 » 产业观察] 谁收入最高？程序员收入大比拼 jarry 2008-6-11 <br /> [专业 » 产业观察] Blog营销的特征 jarry 2008-6-10 <br /> [专业 » 产业观察] 推荐一个文内广告平台：群视 jarry 2008-6-8 <br /> [专业 » 产业观察] Google官方解释为何更换小图标 jarry 2008-6-8 <br /> [专业 » 产业观察] 二十年前的1GB jarry 2008-6-8 <br /> [专业 » 产业观察] 【pr=7，震古铄今，PR=8，天人合一】PR境界谈 jarry 2008-6-8 <br /> [专业 » 产业观察] 大网站谎言，你有没有被欺骗过 jarry 2008-6-8 <br /> [专业 » 产业观察] blog.35免费绑定域名的wp服务 jarry 2008-6-7 <br /> [专业 » 产业观察] 腾讯SNS：QQ校友开始内测 jarry 2008-6-7 <br /> [专业 » 产业观察] 衡量博客价值七个指标 jarry 2008-6-6 <br /> [专业 » 产业观察] 另类思维：百度是嫖客我（站长）要学会做小姐 jarry 2008-6-6 <br /> [专业 » 产业观察] 中国电信承接CDMA后的运营策略 jarry 2008-6-5 <br /> [专业 » 产业观察] 微软新系统Windows 7桌面截图（16pics） jarry 2008-6-5 <br /> [专业 » 产业观察] 3G门户：无线互联网门户网站 jarry 2008-6-5 <br /> [专业 » 产业观察] Retaggr：个性化名片制作 jarry 2008-6-3 <br /> [专业 » 产业观察] Acrobat：Adobe的网络办公室 jarry 2008-6-3 <br /> [专业 » 产业观察] 影响博客互动运营的八大因素 jarry 2008-6-2 <br /> [专业 » 产业观察] 影响中国人通讯习惯的十家公司 jarry 2008-6-2 <br /> [专业 » 产业观察] 5月浏览器大战升级 FireFox 3份额提升 jarry 2008-6-2 <br /> [专业 » 产业观察] 为什么很多博客赚不到钱? jarry 2008-5-31 <br /> [专业 » 产业观察] VIA OpenBook迷你笔记本实物图 jarry 2008-5-31 <br /> [专业 » 产业观察] 人肉搜索：天使还是魔鬼？ jarry 2008-5-30 <br /> [专业 » 产业观察] 360doc：个人图书馆，网页在线收藏 jarry 2008-5-30 <br /> [专业 » 产业观察] 时光网：电影、社区、你和我 jarry 2008-5-30 <br /> [专业 » 产业观察] 十大最让人恼火的软件 jarry 2008-5-27 <br /> [专业 » 产业观察] 付钱让员工辞职，Zappos 的成功秘诀 jarry 2008-5-27 <br /> [专业 » 产业观察] 三部委发布电信业重组公告完成后发三张3G牌照 jarry 2008-5-25 <br /> [专业 » 产业观察] QQ网络硬盘网页版秘密发布 jarry 2008-5-25 <br /> [专业 » 产业观察] Google Sites开始向所有人免费开放建立自己的个人主页 jarry 2008-5-23 <br /> [专业 » 产业观察] 10个不为人知的Google失败作品 jarry 2008-5-22 <br /> [专业 » 产业观察] C2Call：基于Web浏览器的网络电话服务 jarry 2008-5-21 <br /> [专业 » 产业观察] 微软放弃Vista 用Windows 7取而代之 jarry 2008-5-21 <br /> [专业 » 产业观察] 2008年不可错过的Web2.0产品 jarry 2008-5-21 <br /> [专业 » 产业观察] 在 Google Earth 上看新闻 jarry 2008-5-21 <br /> [专业 » 产业观察] 全国哀悼日CCTV启用wenchuan.cn域名 jarry 2008-5-20 <br /> [专业 » 产业观察] 微软抗衡谷歌计划:200亿并购Facebook jarry 2008-5-20 <br /> [专业 » 产业观察] 还有什么不能卖？－ebay 十大火星拍卖 jarry 2008-5-19 <br /> [专业 » 产业观察] 互联网营销——互联网是手段，营销才是本质 jarry 2008-5-13 <br /> [专业 » 产业观察] 中移动手机邮箱也抄袭？ jarry 2007-11-2 <br /> [专业 » 产业观察] TNND，要彻底放弃MSN了。 jarry 2007-6-11 <br /> [专业 » 产业观察] 好玩的在线工具 jarry 2006-11-11 <br /> [专业 » 产业观察] 让收费网站去死吧，用google 突破！！ jarry 2005-11-20 <br /> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

这是基于这种方法做的对联效果：

<!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" /> <meta name="author" content="Chomo" /> <title>利用模拟的position:fixed做的对联</title> <link rel="start" href="http://www.14px.com" title="Home" /> </head> <style> * { padding:0; margin:0;} body { height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;} html { height:100%; overflow:hidden;} .fixed { position:absolute; top:10px; left:50%; width:100px; margin-left:-490px; height:350px; background:#fc0; border:1px solid #f60;} .fixed2 { position:absolute; top:10px; left:50%; width:100px; margin-left:370px; height:350px; background:#fc0; border:1px solid #f60;} .wrapper { height:100%; overflow:auto; overflow-y:scroll;} .body { width:700px; margin:0 auto; background:#f2f2f2; padding:20px;} </style> <body> <div class="fixed">猪坚强</div> <div class="fixed2">又一个猪坚强</div> <div class="wrapper"> <div class="body"> [专业 » 产业观察] 彩虹显IP怕成被告？TX给彩虹暗示？ jarry 2008-11-17 <br /> [专业 » 产业观察] 上海东楼Kappa女：互联网的作用＝炒作？ jarry 2008-11-13 <br /> [专业 » 产业观察] 全球性商务人脉网络平台：XING.com jarry 2008-11-1 <br /> [专业 » 产业观察] 什么是口碑营销？ jarry 2008-10-17 <br /> [专业 » 产业观察] 第二届 Open Web 大赛开幕 jarry 2008-10-16 <br /> [专业 » 产业观察] 百度有啊C2C网络交易平台即将上线 jarry 2008-10-12 <br /> [专业 » 产业观察] 首款谷歌Android手机高调上市 jarry 2008-10-10 <br /> [专业 » 产业观察] 七个获得订阅用户的黑色真理 jarry 2008-10-8 <br /> [专业 » 产业观察] 靠写博客赚钱的五个必要条件 jarry 2008-10-7 <br /> [专业 » 产业观察] Windows Live Messenger 9 Wave3 最终发布日期确定 jarry 2008-10-6 <br /> [专业 » 产业观察] 2008中国互联网大会昨日开幕 jarry 2008-9-24 <br /> [专业 » 产业观察] 有道热闻上线！ jarry 2008-9-19 <br /> [专业 » 产业观察] Phpcms 2008 测试版9月1日开源免费发布 jarry 2008-9-17 <br /> [专业 » 产业观察] 电脑报介绍的adobe air应用 jarry 2008-9-10 <br /> [专业 » 产业观察] WordCamp China 2008即将召开 jarry 2008-8-28 <br /> [专业 » 产业观察] 开发硬件防火墙的主要步骤 jarry 2008-8-11 <br /> [专业 » 产业观察] 细数20个Windows 7应该拥有的功能 - Windows 7之家--iWindows7.com jarry 2008-8-6 <br /> [专业 » 产业观察] 互联网运营者和互联网评论者 jarry 2008-6-22 <br /> [专业 » 产业观察] 有趣的BlogBus暂停服务提示 jarry 2008-6-12 <br /> [专业 » 产业观察] 谁收入最高？程序员收入大比拼 jarry 2008-6-11 <br /> [专业 » 产业观察] Blog营销的特征 jarry 2008-6-10 <br /> [专业 » 产业观察] 推荐一个文内广告平台：群视 jarry 2008-6-8 <br /> [专业 » 产业观察] Google官方解释为何更换小图标 jarry 2008-6-8 <br /> [专业 » 产业观察] 二十年前的1GB jarry 2008-6-8 <br /> [专业 » 产业观察] 【pr=7，震古铄今，PR=8，天人合一】PR境界谈 jarry 2008-6-8 <br /> [专业 » 产业观察] 大网站谎言，你有没有被欺骗过 jarry 2008-6-8 <br /> [专业 » 产业观察] blog.35免费绑定域名的wp服务 jarry 2008-6-7 <br /> [专业 » 产业观察] 腾讯SNS：QQ校友开始内测 jarry 2008-6-7 <br /> [专业 » 产业观察] 衡量博客价值七个指标 jarry 2008-6-6 <br /> [专业 » 产业观察] 另类思维：百度是嫖客我（站长）要学会做小姐 jarry 2008-6-6 <br /> [专业 » 产业观察] 中国电信承接CDMA后的运营策略 jarry 2008-6-5 <br /> [专业 » 产业观察] 微软新系统Windows 7桌面截图（16pics） jarry 2008-6-5 <br /> [专业 » 产业观察] 3G门户：无线互联网门户网站 jarry 2008-6-5 <br /> [专业 » 产业观察] Retaggr：个性化名片制作 jarry 2008-6-3 <br /> [专业 » 产业观察] Acrobat：Adobe的网络办公室 jarry 2008-6-3 <br /> [专业 » 产业观察] 影响博客互动运营的八大因素 jarry 2008-6-2 <br /> [专业 » 产业观察] 影响中国人通讯习惯的十家公司 jarry 2008-6-2 <br /> [专业 » 产业观察] 5月浏览器大战升级 FireFox 3份额提升 jarry 2008-6-2 <br /> [专业 » 产业观察] 为什么很多博客赚不到钱? jarry 2008-5-31 <br /> [专业 » 产业观察] VIA OpenBook迷你笔记本实物图 jarry 2008-5-31 <br /> [专业 » 产业观察] 人肉搜索：天使还是魔鬼？ jarry 2008-5-30 <br /> [专业 » 产业观察] 360doc：个人图书馆，网页在线收藏 jarry 2008-5-30 <br /> [专业 » 产业观察] 时光网：电影、社区、你和我 jarry 2008-5-30 <br /> [专业 » 产业观察] 十大最让人恼火的软件 jarry 2008-5-27 <br /> [专业 » 产业观察] 付钱让员工辞职，Zappos 的成功秘诀 jarry 2008-5-27 <br /> [专业 » 产业观察] 三部委发布电信业重组公告完成后发三张3G牌照 jarry 2008-5-25 <br /> [专业 » 产业观察] QQ网络硬盘网页版秘密发布 jarry 2008-5-25 <br /> [专业 » 产业观察] Google Sites开始向所有人免费开放建立自己的个人主页 jarry 2008-5-23 <br /> [专业 » 产业观察] 10个不为人知的Google失败作品 jarry 2008-5-22 <br /> [专业 » 产业观察] C2Call：基于Web浏览器的网络电话服务 jarry 2008-5-21 <br /> [专业 » 产业观察] 微软放弃Vista 用Windows 7取而代之 jarry 2008-5-21 <br /> [专业 » 产业观察] 2008年不可错过的Web2.0产品 jarry 2008-5-21 <br /> [专业 » 产业观察] 在 Google Earth 上看新闻 jarry 2008-5-21 <br /> [专业 » 产业观察] 全国哀悼日CCTV启用wenchuan.cn域名 jarry 2008-5-20 <br /> [专业 » 产业观察] 微软抗衡谷歌计划:200亿并购Facebook jarry 2008-5-20 <br /> [专业 » 产业观察] 还有什么不能卖？－ebay 十大火星拍卖 jarry 2008-5-19 <br /> [专业 » 产业观察] 互联网营销——互联网是手段，营销才是本质 jarry 2008-5-13 <br /> [专业 » 产业观察] 中移动手机邮箱也抄袭？ jarry 2007-11-2 <br /> [专业 » 产业观察] TNND，要彻底放弃MSN了。 jarry 2007-6-11 <br /> [专业 » 产业观察] 好玩的在线工具 jarry 2006-11-11 <br /> [专业 » 产业观察] 让收费网站去死吧，用google 突破！！ jarry 2005-11-20 <br /> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

原理如下：

提示：你可以先修改部分代码再运行。

把框框的高宽都扩大到100%，然后将雷打不动的文字定个位就行了。

Chomo xhtml+css position, xhtml+css

表格外观的无序列表

5月 26th, 2009

2 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

别看有的东东长得个表格样，其实是披着表格皮的无序列表，为了伟大的语义，我们需要用css实现表格外观的无序列表。

个人喜好，这里采用border和negative margin来实现，非常简单：

提示：你可以先修改部分代码再运行。

这是一个最简单的模型，然而，实战总是残酷的：

宽度如何自适应分辨率？
单元格内容过多、形成换行如何处理？
最纠结的问题：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失色…

问题1：宽度如何自适应分辨率？
这个问题也许有人说没必要，但是在模块化设计时，几乎任何部件都被要求设置为宽度自适应模式的。

解决1：参考完美的firefox3和ie8百分比宽度处理方案，给剩余的宽度分配给某个“列”，就行了 ^-^
记得二列等高的笨办法吗？——用背景图片模拟。

提示：你可以先修改部分代码再运行。

问题2：单元格内容过多、形成换行如何处理？

解决2：隐藏吧，它已经没有存在的价值了！（ - -! 其实是我想不出别的办法来了）
但为了体验好一点，我加上了text-overflow。这个，FF暂时不支持……aoao有好的解决办法，我也有次点的解决办法和一个完美的解决办法（目前YY中，且仅FF3.5支持）。

提示：你可以先修改部分代码再运行。

问题3：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失色…
看这个Demo，其实我觉得这个样子不影响阅读，也不难看了，可Boss和他的Money不乐意。

提示：你可以先修改部分代码再运行。

解决3：
首先让我们制造出我们想要的表格（很遗憾，制造了很多空标签，暂时没有找到更合适的纯CSS解决方案，欢迎大家多多指点）。

提示：你可以先修改部分代码再运行。

然后用position:relative实现css移魂大法：

提示：你可以先修改部分代码再运行。

然后让我们隐藏多余的那一行：

提示：你可以先修改部分代码再运行。

09-05-26 补充

幸亏不畏强暴地贴到蓝色去挨批了，现在不用空格了，谢谢birdstudio的思路，要能去掉span就完美了。哦米陀佛，天上赶紧掉个

提示：你可以先修改部分代码再运行。

Chomo xhtml+css ul, xhtml+css, 实例

全兼容的纯CSS级联菜单制作要点浅析

5月 20th, 2009

14 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

这次给云南移动网上营业厅做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。^-^

早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。

废话不多说，咚咚咚，开始制作啦！！！

除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。

<!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" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>三级级联菜单</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} .c_subNav { width:150px; } .c_subNav a { text-decoration:none; color:#333;} .c_subNav a:hover { color:#f60;} .c_subNav ul ul { position:absolute; display:none; right:-150px; top:-1px;} .c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;} .c_subNav a.li { position:relative;} .c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat;} .c_subNav li .option:hover { color:#f60; background-color:#ffa;} .c_subNav li .option span { display:block; padding-right:15px; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat right 0;} .c_subNav li .option:hover span { background-position:right -15px;} .c_subNav .li:hover { z-index:2; background:transparent;} .c_subNav .li:hover ul { display:block;} .c_subNav .li:hover ul ul { display:none;} .c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;} .c_subNav .li:hover li { border-bottom:none;} .c_subNav .li:hover li .option { padding:2px 5px; background:transparent;} .c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;} .c_subNav .li:hover li .option:hover span { background-position:right -30px;} .c_subNav .li:hover .li:hover ul { display:block; left:145px; top:-2px;} .c_subNav .charges .option { background-position:4px -45px;} .c_subNav .biz .option { background-position:4px -70px;} .c_subNav .change .option { background-position:4px -95px;} .c_subNav .score .option { background-position:4px -120px;} .c_subNav .server .option { background-position:4px -145px;} .c_subNav .edit .option { background-position:4px -170px;} .c_subNav .sms .option { background-position:4px -195px;} </style> </head> <body> <div class="c_subNav"> <ul> <li class="li charges"> <a href="#nogo" class="option"><span>话费服务</span></a> <ul> <li class="li"> <a href="#nogo" class="option"><span>话费查询</span></a> <ul> <li class="li"><a href="#nogo" class="option">实时话费查询</a></li> <li class="li"><a href="#nogo" class="option">话费余额查询</a></li> <li class="li"><a href="#nogo" class="option">月账单查询</a></li> <li class="li"><a href="#nogo" class="option">月详单查询</a></li> <li class="li"><a href="#nogo" class="option">缴费历史查询</a></li> <li class="li"><a href="#nogo" class="option">资费优选推荐</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option"><span>定制话费信息</span></a> <ul> <li class="li"><a href="#nogo" class="option">定制短信账单</a></li> <li class="li"><a href="#nogo" class="option">话费余额短信提醒</a></li> <li class="li"><a href="#nogo" class="option">定制Email账单</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option"><span>网上交费</span></a> <ul> <li class="li"><a href="#nogo" class="option">网上缴费</a></li> <li class="li"><a href="#nogo" class="option">充值卡缴费</a></li> </ul> </li> </ul> </li> <li class="li biz"> <a href="#nogo" class="option"><span>业务办理</span></a> <ul> <li class="li"> <a href="#nogo" class="option"><span>日常业务办理</span></a> <ul> <li class="li"><a href="#nogo" class="option">来电显示</a></li> <li class="li"><a href="#nogo" class="option">呼叫等待</a></li> <li class="li"><a href="#nogo" class="option">呼叫转移</a></li> <li class="li"><a href="#nogo" class="option">三方通话</a></li> <li class="li"><a href="#nogo" class="option">来电提醒</a></li> <li class="li"><a href="#nogo" class="option">呼叫保持</a></li> <li class="li"><a href="#nogo" class="option">呼叫转移设置</a></li> <li class="li"><a href="#nogo" class="option">主叫隐藏</a></li> <li class="li"><a href="#nogo" class="option">彩铃</a></li> <li class="li"><a href="#nogo" class="option">国内漫游</a></li> <li class="li"><a href="#nogo" class="option">短信回执</a></li> <li class="li"><a href="#nogo" class="option">12580综合信息</a></li> <li class="li"><a href="#nogo" class="option">关爱一线通</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option"><span>数据业务</span></a> <ul> <li class="li"><a href="#nogo" class="option">手机上网</a></li> <li class="li"><a href="#nogo" class="option">GPRS</a></li> <li class="li"><a href="#nogo" class="option">飞信</a></li> <li class="li"><a href="#nogo" class="option">手机报</a></li> <li class="li"><a href="#nogo" class="option">无线音乐俱乐部</a></li> <li class="li"><a href="#nogo" class="option">手机邮箱</a></li> <li class="li"><a href="#nogo" class="option">号簿管家</a></li> <li class="li"><a href="#nogo" class="option">WLAN业务</a></li> <li class="li"><a href="#nogo" class="option">彩乐短信</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option"><span>手机报停/报开</span></a> <ul> <li class="li"><a href="#nogo" class="option">手机报停</a></li> <li class="li"><a href="#nogo" class="option">手机复机</a></li> </ul> </li> <li class="li"> <a href="#nogo" class="option">梦网查询与退订</a> </li> </ul> </li> <li class="li change"> <a href="#nogo" class="option"><span>套餐办理与变更</span></a> <ul> <li class="li"><a href="#nogo" class="option">GPRS套餐变更</a></li> <li class="li"><a href="#nogo" class="option">产品变更</a></li> </ul> </li> <li class="li score"> <a href="#nogo" class="option"><span>积分计划</span></a> <ul> <li class="li"><a href="#nogo" class="option">积分查询</a></li> <li class="li"><a href="#nogo" class="option">积分兑换</a></li> <li class="li"><a href="#nogo" class="option">积分明细查询</a></li> <li class="li"><a href="#nogo" class="option">积分兑换话费</a></li> <li class="li"><a href="#nogo" class="option">积分兑换历史查询</a></li> </ul> </li> <li class="li server"> <a href="#nogo" class="option"><span>在线客服</span></a> <ul> <li class="li"><a href="#nogo" class="option">号码归属地查询</a></li> <li class="li"><a href="#nogo" class="option">营业厅查询</a></li> <li class="li"><a href="#nogo" class="option">手机仿真</a></li> <li class="li"><a href="#nogo" class="option">在线咨询</a></li> </ul> </li> <li class="li edit"> <a href="#nogo" class="option"><span>个人信息管理</span></a> <ul> <li class="li"><a href="#nogo" class="option">个人资料修改</a></li> <li class="li"><a href="#nogo" class="option">服务密码变更</a></li> <li class="li"><a href="#nogo" class="option">服务密码重置</a></li> <li class="li"><a href="#nogo" class="option">PUK码查询</a></li> <li class="li"><a href="#nogo" class="option">套餐使用状态查询</a></li> <li class="li"><a href="#nogo" class="option">业务开通状态查询</a></li> </ul> </li> <li class="li sms"> <a href="#nogo" class="option">短信息服务</a> </li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

该实例完成大概就两个要点：

1. 忌浮忌躁，一步步来，先把最低级的display:none;掉。

2. “:hover伪类”的使用，默认状态“display:none;”，“:hover”时则“display:block;”则能很容易完成。

而IE6下折腾就比较复杂了，经过头破血流的教训之后，总结出关键四点：

1. 原理：IE6仅<a>标签支持:hover伪类，但如果a标签里面再嵌入a标签，里面的a标签将不会生效，所以必须在之间套加一层<table>；

<!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
内容部分可以含有<a>标签
<!–[if IE 6]></td></tr></table></a><![endif]–>

2. 关键样式名：这个用于:hover效果的a标签的命名，如果使用与<li>一致的样式名（在非IE6中是li:hover产生的效果），将不用再另写样式代码，不仅节省了代码开销，而且可维性更好；

<li class="li">
<!–[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]–>
内容部分可以含有<a>标签
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>

3. visibility的使用：采用display的话将出现onmouseout时上一次显示的optionGroup仍然不消失的情况

.c_subNav .li:hover ul { visibility:visible;}

4.table的设置：[含泪ing]table一定要记得width:100%;啊，一定要记得啊，一定要记得啊，一定要记得啊……

最后完成效果：

<!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" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>三级级联菜单</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} .c_subNav { width:150px; } .c_subNav table { width:100%; border-collapse:collapse;} .c_subNav a { text-decoration:none; color:#333;} .c_subNav a:hover { color:#f60;} .c_subNav ul ul { position:absolute; visibility:hidden; right:-150px; top:-1px;} .c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;} .c_subNav a.li { position:relative;} .c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat;} .c_subNav li .option:hover { color:#f60; background-color:#ffa;} .c_subNav li .option span { display:block; padding-right:15px; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat right 0;} .c_subNav li .option:hover span { background-position:right -15px;} .c_subNav .li:hover { z-index:2; background:transparent;} .c_subNav .li:hover ul { visibility:visible;} .c_subNav .li:hover ul ul { visibility:hidden;} .c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;} .c_subNav .li:hover li { border-bottom:none;} .c_subNav .li:hover li .option { padding:2px 5px; background:transparent;} .c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;} .c_subNav .li:hover li .option:hover span { background-position:right -30px;} .c_subNav .li:hover .li:hover ul { visibility:visible; left:145px; top:-2px;} /*---图标差异---*/ .c_subNav .charges .option { background-position:4px -45px;} .c_subNav .biz .option { background-position:4px -70px;} .c_subNav .change .option { background-position:4px -95px;} .c_subNav .score .option { background-position:4px -120px;} .c_subNav .server .option { background-position:4px -145px;} .c_subNav .edit .option { background-position:4px -170px;} .c_subNav .sms .option { background-position:4px -195px;} </style> </head> <body> <div class="c_subNav"> <ul> <li class="li charges">  <a href="#nogo" class="option"><span>话费服务</span></a> <ul> <li class="li">  <a href="#nogo" class="option"><span>话费查询</span></a> <ul> <li class="li"><a href="#nogo" class="option">实时话费查询</a></li> <li class="li"><a href="#nogo" class="option">话费余额查询</a></li> <li class="li"><a href="#nogo" class="option">月账单查询</a></li> <li class="li"><a href="#nogo" class="option">月详单查询</a></li> <li class="li"><a href="#nogo" class="option">缴费历史查询</a></li> <li class="li"><a href="#nogo" class="option">资费优选推荐</a></li> </ul>  </li> <li class="li">  <a href="#nogo" class="option"><span>定制话费信息</span></a> <ul> <li class="li"><a href="#nogo" class="option">定制短信账单</a></li> <li class="li"><a href="#nogo" class="option">话费余额短信提醒</a></li> <li class="li"><a href="#nogo" class="option">定制Email账单</a></li> </ul>  </li> <li class="li">  <a href="#nogo" class="option"><span>网上交费</span></a> <ul> <li class="li"><a href="#nogo" class="option">网上缴费</a></li> <li class="li"><a href="#nogo" class="option">充值卡缴费</a></li> </ul>  </li> </ul>  </li> <li class="li biz">  <a href="#nogo" class="option"><span>业务办理</span></a> <ul> <li class="li">  <a href="#nogo" class="option"><span>日常业务办理</span></a> <ul> <li class="li"><a href="#nogo" class="option">来电显示</a></li> <li class="li"><a href="#nogo" class="option">呼叫等待</a></li> <li class="li"><a href="#nogo" class="option">呼叫转移</a></li> <li class="li"><a href="#nogo" class="option">三方通话</a></li> <li class="li"><a href="#nogo" class="option">来电提醒</a></li> <li class="li"><a href="#nogo" class="option">呼叫保持</a></li> <li class="li"><a href="#nogo" class="option">呼叫转移设置</a></li> <li class="li"><a href="#nogo" class="option">主叫隐藏</a></li> <li class="li"><a href="#nogo" class="option">彩铃</a></li> <li class="li"><a href="#nogo" class="option">国内漫游</a></li> <li class="li"><a href="#nogo" class="option">短信回执</a></li> <li class="li"><a href="#nogo" class="option">12580综合信息</a></li> <li class="li"><a href="#nogo" class="option">关爱一线通</a></li> </ul>  </li> <li class="li">  <a href="#nogo" class="option"><span>数据业务</span></a> <ul> <li class="li"><a href="#nogo" class="option">手机上网</a></li> <li class="li"><a href="#nogo" class="option">GPRS</a></li> <li class="li"><a href="#nogo" class="option">飞信</a></li> <li class="li"><a href="#nogo" class="option">手机报</a></li> <li class="li"><a href="#nogo" class="option">无线音乐俱乐部</a></li> <li class="li"><a href="#nogo" class="option">手机邮箱</a></li> <li class="li"><a href="#nogo" class="option">号簿管家</a></li> <li class="li"><a href="#nogo" class="option">WLAN业务</a></li> <li class="li"><a href="#nogo" class="option">彩乐短信</a></li> </ul>  </li> <li class="li">  <a href="#nogo" class="option"><span>手机报停/报开</span></a> <ul> <li class="li"><a href="#nogo" class="option">手机报停</a></li> <li class="li"><a href="#nogo" class="option">手机复机</a></li> </ul>  </li> <li class="li"> <a href="#nogo" class="option">梦网查询与退订</a> </li> </ul>  </li> <li class="li change">  <a href="#nogo" class="option"><span>套餐办理与变更</span></a> <ul> <li class="li"><a href="#nogo" class="option">GPRS套餐变更</a></li> <li class="li"><a href="#nogo" class="option">产品变更</a></li> </ul>  </li> <li class="li score">  <a href="#nogo" class="option"><span>积分计划</span></a> <ul> <li class="li"><a href="#nogo" class="option">积分查询</a></li> <li class="li"><a href="#nogo" class="option">积分兑换</a></li> <li class="li"><a href="#nogo" class="option">积分明细查询</a></li> <li class="li"><a href="#nogo" class="option">积分兑换话费</a></li> <li class="li"><a href="#nogo" class="option">积分兑换历史查询</a></li> </ul>  </li> <li class="li server">  <a href="#nogo" class="option"><span>在线客服</span></a> <ul> <li class="li"><a href="#nogo" class="option">号码归属地查询</a></li> <li class="li"><a href="#nogo" class="option">营业厅查询</a></li> <li class="li"><a href="#nogo" class="option">手机仿真</a></li> <li class="li"><a href="#nogo" class="option">在线咨询</a></li> </ul>  </li> <li class="li edit">  <a href="#nogo" class="option"><span>个人信息管理</span></a> <ul> <li class="li"><a href="#nogo" class="option">个人资料修改</a></li> <li class="li"><a href="#nogo" class="option">服务密码变更</a></li> <li class="li"><a href="#nogo" class="option">服务密码重置</a></li> <li class="li"><a href="#nogo" class="option">PUK码查询</a></li> <li class="li"><a href="#nogo" class="option">套餐使用状态查询</a></li> <li class="li"><a href="#nogo" class="option">业务开通状态查询</a></li> </ul>  </li> <li class="li sms"> <a href="#nogo" class="option">短信息服务</a> </li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Chomo xhtml+css :hover, xhtml+css, 实例, 导航

对主流浏览器“半个像素”渲染差异分析

5月 11th, 2009

4 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

像素都是单个单个显示的，绝对不会出现半个像素，那么0.63px这样的定义经各浏览器渲染之后得出什么样的结果呢？
经过偶不厌其烦的例举分析，得到以下结果并经过了一次验算，第二次验算在实战中用到它再说吧。

这个结果能用到什么场合呢？恩，我也不知道。囧rz。
但我相信既然有差异肯定就能起到hack的作用。可不要小看一个半个的像素，有时候它能起到很关键的作用，这个差异最大的特点就是几乎每个浏览器之间，均存在该差异。

一点说明：一般精确到1/1000就能看出各浏览器之间的差异，这里采用直接进一法来精确到1/1000。

border

IE6/IE7 | 1.000 = 1
OP9.6　 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3　　 | 0.98999998 = 1
IE8　　 | 0.010 = 1
FF3　　 | 0.009 = 1

width

IE6/IE7 | 1.000 = 1
OP9.6　 | 0.995 = 1
SF3　　 | 0.991 = 1
Chrome2 | 0.990 = 1
IE8　　 | 0.510 = 1
FF3　　 | 0.492 = 1

margin负值

IE6/IE7 | 1.000 = 1
OP9.6　 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3　　 | 0.98999998 = 1
FF3　　 | 0.509 = 1
IE8　　 | 0.500 = 1

margin正值

IE6/IE7 | 1.000 = 1
OP9.6　 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3　　 | 0.98999998 = 1
IE8　　 | 0.510 = 1
FF3　　 | 0.492 = 1

padding

IE6/IE7 | 1.000 = 1
OP9.6　 | 0.995 = 1
Chrome2 | 0.990 = 1
SF3　　 | 0.98999998 = 1
IE8　　 | 0.510 = 1
FF3　　 | 0.492 = 1

其中有几种比较特殊的情况：

[IE8/border：如果border-left与border-right同时存在，border-width:0.010时对width宽度造成影响，小于既定宽度2px，0.510时小1px，0.760时恢复正常。]

[IE8/padding：如果padding-left与padding-right同时存在，padding:0.260时出现right & bottom边框，0.510时出现top和bottom边框，0.760时才两者同时出现。]

[FF3/padding：如果padding-left与padding-right同时存在，padding:0.242时出现right & bottom边框，0.492时出现top和bottom边框，0.742时才两者同时出现。]

【几个属性同时使用时的情况太复杂了，FF简直寻不着规律，IE8还好点，以下举个例子，就不继续深入探讨了】

以IE8为例，padding和margin同时使用小数时：
设padding-left:0.510;（单独使用padding-left时，IE8下，0.510=1） margin-left:1px;为正常状态。
margin-left则不能使用小数，否则小数部分无效。
如果padding-left:0.520，margin-left则可使用49.99px。

Chomo xhtml+css hack, xhtml+css

解决IE6与IE7中的按钮多出1px的内边框问题

5月 9th, 2009

5 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

自古多情空余恨——这话太适合形容我此时此刻的心情，IE6/IE7这俩自作多情的浏览器经常让我愤恨不已。
这故事、这bug是这样的：

默认的按钮我不爱它，所以我想给它一个我觉得漂亮的背景，但是长度又不一致，所以就加个border，然后弄个可以repeat-x的background-image。
结果：IE6/IE7出现了1px的白色内边框。

提示：你可以先修改部分代码再运行。

^-^ 改变了一下body的背景，发现原来这个内边框其实不是白色的，而是透明的。

提示：你可以先修改部分代码再运行。

唔，幸亏是透明的，于是解决方案很快就找到啦：

提示：你可以先修改部分代码再运行。

Chomo xhtml+css bug, IE6/IE7, xhtml+css, 按钮, 表单元素

float-left的对象如何居中

5月 9th, 2009

No comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

[float:left]有个伟大之处，它使div（或者其他标签）的宽度自适应其内容，但它却有个弊端：无法居中。
[display:inline-block]也有同样的特性，并且可以居中，但连续几个这样的东东，之间却会出现空格。

为了解决这个问题，我们可以把二者结合起来使用：

提示：你可以先修改部分代码再运行。

当然，这样的结构是不正确的，但是我们可以模拟一下（模拟方法的详情请见怿飞的文章：模拟兼容性的 inline-block 属性）

提示：你可以先修改部分代码再运行。

Chomo xhtml+css float, inline-block, xhtml+css, 居中

div仿框架方法详解

4月 23rd, 2009

9 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

问这样的问题的人很多，我对此有比较深入的研究，但自己从来没有给出过完整的解答与分析，觉得有些对不住样式界的列祖列宗。

先请看demo：

提示：你可以先修改部分代码再运行。

通过css的结构大家应该不难看出，这里采用了ie6最基本的hack来区分ie6与其他浏览器来实现这个效果。

那么本教程也将分而述之。

撇开ie6，我们看这个demo：

提示：你可以先修改部分代码再运行。

大家看到，此时div的实际高宽，完全由left / right / top / bottom这四个属性所掌控着，于是我们便可以借助这个特性，轻松地完成div仿框架的效果了：

提示：你可以先修改部分代码再运行。

让我们将应该有滚动条的地方的滚动条效果折腾出来：

提示：你可以先修改部分代码再运行。

以上方法其实早已由wiseinfo在Html+CSS 构建 B/S结构软件界面 — 布局篇 — position方式中进行过介绍，在该文中，ie6亦是分而治之的，它的方法是在html代码顶部加入“<?xml version=”1.0″ encoding=”UTF-8″?>”，使得ie6进入quirks mode（怪异模式）来完成ie6下的div仿框架，但这样做将出现一些影响比较显著的弊端：

1. quirks mode下的ie6连盒模型都变了，就是说你在页面中写任何内容就要慎用padding和border，况且quirks mode下的变化还不止这一点。
2. 如果底部使用绝对定位，则会发生“绝对定位基对象（在此为body）高度为偶数时，出现1px空隙”的bug。

<?xml version="1.0" encoding="UTF-8"?> <!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" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 将ie6导入了quirks mode（怪异模式），很有弊端</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} .div1 { background:#fc0; line-height:1.6; width:400px; height:100px; border:50px solid #f60; padding:20px;} .div2 { background:#f60; line-height:1.6; width:400px; height:100px; position:absolute; bottom:0; left:0;} </style> </head> <body> <div class="div1">该页面请在ie6和非ie6下对比，ie6下连盒模型都变了，就是说你在页面中写任何内容就要慎用padding和border，况且quirks mode下的变化还不止这一点。</div> <div class="div2"> 如果底部使用绝对定位，则会发生“绝对定位基对象（在此为body）高度为偶数时，出现1px空隙”的bug。<br /> 您可以试着改变浏览器的大小进行观测。 </div> </body> </html>

提示：你可以先修改部分代码再运行。

于是我们需要另辟蹊径。

在很多次失败之后，我终于发现有一个标签可以救ie6于水深火热，那就是最伟大的“<html>”标签，它继承了ie6 quirks mode（怪异模式）下的盒模型状态。

提示：你可以先修改部分代码再运行。

利用这一点，我们可以在不太轻松的调整之后完成以下效果：

提示：你可以先修改部分代码再运行。

再用下我们的二列布局知识来完成最终形态，在此我们将艳遇著名的3px bug：

提示：你可以先修改部分代码再运行。

现在我们拥有了ie6的仿框架和非ie6的div仿框架的最终形态，只需要利用hack做个简单的加法则行了：
（当然，同一属性写两遍，后面的属性所对应的值将覆盖前者，这个基础的优先级基础大家还需要温故一下。）
（再“当然”一下——当然，有人对hack深恶痛绝，那么请在使用之前，阅读此文看看是否能消消心头之恨。）

提示：你可以先修改部分代码再运行。

它很强大而实用，真的：

提示：你可以先修改部分代码再运行。

以下是09-05-09的补充

但在实际应用中主体部分常常是个iframe，加个iframe，IE7则无法适应。T_T

提示：你可以先修改部分代码再运行。

而且……其实IE7下还不止这一点bug（虽然可以直接overflow-y:scroll，但我于心不忍）。

提示：你可以先修改部分代码再运行。

所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only。

提示：你可以先修改部分代码再运行。

iframe无法适应高度的bug也一起被修复了，人生真美好。

提示：你可以先修改部分代码再运行。

续集完，谢谢观赏。

以下是09-05-24的补充，在KentXD的细心测试下，该方案在ie6下又出现了惊喜：

当bottom部分存在文字的时候，从bottom部分跨越至main部分一直选定，当选定状态仍保持的时候，最大化 / 还原窗口，页面整体向上移动了n个像素，貌似*padding:70px 0;失去了作用。

提示：你可以先修改部分代码再运行。

^-^ 好在改变position的属性为absolute之后，该bug顺利修复：

提示：你可以先修改部分代码再运行。

又一篇续集结束，谢谢Kent。

Chomo xhtml+css frame, position, xhtml+css

Older Entries

Archive

利用box-sizing实现div仿框架

inline-block对象间的缝隙

全屏屏蔽、自动居中的lightBox

在ie6下实现position-fixed的效果

表格外观的无序列表

全兼容的纯CSS级联菜单制作要点浅析

对主流浏览器“半个像素”渲染差异分析

解决IE6与IE7中的按钮多出1px的内边框问题

float-left的对象如何居中

div仿框架方法详解

分类

最新文章

最新评论

充电器

关注web标准化的朋友

身边