Tom和Jerry的生活 - 关注和分享互联网

CSS:alpha背景透明

tom — Sun, 16 Nov 2008 15:25:24 +0000

在各浏览器下用css实现背景透明。但有个bug就是div中的所有元素都透明。这个问题一直困扰着我，有幸找到一种解决办法，就是加上span元素，在span中定义 position:relative，我也不知道为何加绝对定位就能解决，有时候方法就这么神奇似的。遗憾的是这个方法也只针对IE，其他浏览器还没有找到方法。

代码：

续写alpha透明

CSS实现背景透明效果

图片说明：

解释:

filter:alpha(opacity=35); 支持 IE 浏览器
-moz-opacity:0.35; 支持 FireFox 浏览器
opacity:0.35; 支持 Opera，safari 等浏览器

重置默认样式 css reset 分享

tom — Sun, 16 Nov 2008 15:22:57 +0000

最近看到一个词叫css reset。什么叫做css reset呢？我理解为重置css，也就是重置默认样式。我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（css reset）。每个人的用法和写法都不一样。找到一篇关于css reset的调查文章，可以看看国外使用css reset的比例调查。

这里有一篇总结css reset比较全面的文章，列举了多种css reset的写法，可以看看。
译文地址查看
 原文地址查看

接下来我也查看了国内的两个网站，用Firebug按F12看看他们的css reset怎么写的？

淘宝（www.taobao.com）：

html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:”";
}

百度有啊(www.youa.com)：（架构基本上是模仿YUI来做的）

body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}

在《超越css》一书中建议我们做网站开始重置所有默认样式：

/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}

/* Removes list-style from lists */
ol,ul { list-style:none }

/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }

/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }

/* Removes border from fieldset and img */
fieldset,img { border:0 }

/* Left-aligns text in caption and th */
caption,th { text-align:left }

/* Removes quotation marks from q */
q:before,q:after { content:”}

那我们实际写代码的时候该怎么来css reset呢？
我个人推荐使用（Eric Meyer和YUI）的 css reset

Eric Meyer’s Reset:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

YUI:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { border:0;
}

结合他们的css reset写法，再根据自己的实际情况，一定能写出符合自己网站的完美的css reset。

Visit

对付CSS兼容问题的十个超级技巧

tom — Thu, 13 Nov 2008 14:58:11 +0000

一、针对firefox ie6 ie7的css样式

现在大部分都是用!important来 hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7 不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
Example Source Code
#abc { color: #333; } /* Moz */
* html #abc { color: #666; } /* IE6 */
*+html #abc { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

二、CSS布局中的居中问题

主要的样式定义如下：
Example Source Code
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

三、盒模型
Example Source Code
#box{
;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
>//for ff
;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}

四、浮动ie6产生的双倍距离
Example Source Code
#box{ float:left; ; margin:0 0 0 100px;
//这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

五、IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
Example Source Code
#box{ ;80px; height: 35px;}
html>body #box{ ;auto; height: auto; min- 80px; min-height: 35px;}

六、页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到标签下，然后为 div指定一个类：
然后CSS这样设计：
Example Source Code
#container{
min-;600px;
;xpression(document.body.clientWidth < 600? “600px”: “auto” );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

七、清除浮动
Example Source Code
.hackbox{
display:table;
//将对象作为块元素级的表格显示
}
或者
.hackbox{
clear:both;
}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
Example Source Code
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

八、DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
Example Source Code
#box{
float:left;
;}
#left{
float:left;
;}
#right{
;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>

九、属性选择器(这个不能算是兼容,是隐藏css的一个bug)
Example Source Code
p[id]{}div[id]{}
p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

十、IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

PHP调查系统—LimeSurvey

tom — Sun, 05 Oct 2008 14:40:09 +0000

LimeSurvey是一款开源的PHP调查系统，用官方的话来说，“LimeSurvey有许多种特性，它具有创造一个优雅的在线调查所需的一切元素。”

LimeSurvey具有以下特性：

支持20多种问题类型
强大的用户管理功能
问卷安全设置
允许创建调查分支，即根据之前选项的不同，之后的题目也不同
允许将问题分组、分页显示
允许自定义结果分析方式（例如设置不同问题的权重）
允许在调查中集成图片和视频
自动创建调查表的可打印版本
可以将调查导出为多种格式（text, CSV, PDF, SPSS, queXML, MS Excel）
可以通过email发送邀请和提醒
允许自定义模板
多语言支持，包括简体中文

与其他PHP调查系统相比，LimeSurvey功能十分强大，但同时也造成了一个缺点——上手难。不过一旦适应以后，相信你就可以随心所欲的按照自己的想法创建一个PHP调查问卷了。

想了解更多信息，你可以去LimeSurvey的官方网站：http://www.limesurvey.org/

曲奇网:个性化网络社交服务与互联网应用平台

tom — Tue, 16 Sep 2008 15:14:57 +0000

曲奇网是一家刚刚进入内测的互联网服务，致力于为用户提供全新的互联网体验、学习、办公、工作、休闲等服务。Visit

RssHR:IT业内设计与开发的职位发布平台

tom — Tue, 16 Sep 2008 14:38:09 +0000

RssHR 是一个侧重于国内IT业内设计与开发的职位发布平台，它主要针对IT圈内专业人士，自由设计师和开发人员以及优秀的学生。企业可以发布职位信息，由专业及经验丰富的求职者接受申请，达到招聘及时迅速，目标准确，效果明显的目地。

RssHR的首页十分的简单——一个搜索框，一个内容区域几乎囊括了RssHR的全部，尽管如此我仍然觉得这是一个很有想法的站点，这让我很快联想起另外两个在相似领域产生交集的网站：一个是Kijiji，另外一个则是智联招聘。Kijiji（目前中国站已更名为百姓网）在分类广告信息方面具有专业技术和信息规模优势，而智联招聘在产业链结构和渠道上又具备很强的竞争力。不过，很可惜的是：这两个网站都不是产业细分的结果，从他们目前发展规模来看，尽管已经很强大了，但我觉得现在应该会是他们企业成长过程中的一个瓶颈。Web2.0 需要的是个性化以及足以支撑产品持续发展的细分化。Visit

百付宝官方网站即将上线

tom — Wed, 10 Sep 2008 16:31:00 +0000

9月10日消息，百度今日宣布，已经将其C2C支付平台定名为“百付宝”，百付宝将连同百度C2C平台一起与广大用户见面。

Mashable网站改版

tom — Wed, 10 Sep 2008 01:47:01 +0000

收藏一下!!!:)

Google Chrome：Google浏览器即将发布

tom — Tue, 02 Sep 2008 15:48:06 +0000

Google Chrome:Google计划发布一款名为Google Chrome的浏览器。最早是Blogoscoped的Philipp Lenssen收到了一份Google寄来的漫画书。这本38页的漫画介绍了Google自己的开源浏览器计划Google Chrome（暂时无法访问）的一些技术细节。

有道yodao书签发布

tom — Tue, 02 Sep 2008 15:45:07 +0000

有道书签是您的私人网页收藏夹，集成了对书签的收藏、浏览和管理功能，使您的网页收藏变得更加随心所欲。