一起CSS » CSS

“导”字导致样式失效

青色 — Thu, 03 Jun 2010 09:41:30 +0000

编码是一个标准页面所必须的，但有些人不太在意。或者不定义编码，或者混用编码。也许一般情况下不会出问题，但出了问题就很难会注意到和编码有关系。

一位朋友就因为混用编码引发了一个奇怪的问题：样式文件内的部分样式失效，而代码没有任何错误。你没遇见过这样的问题吧？来看看具体是什么情况：

这位朋友的 HTML 文件的编码为 gb2312 ，而 CSS 文件是 utf-8 的，CSS 文件里有一条注释为“/*导航条*/”。这些有问题吗？对！也许他们不同时存在就没问题，但他们存在了就产生了一个奇怪的问题：注释“/*导航条*/”与下一条注释之间的样式在 IE 下没有效果，如果没有下一条注释了，则下面的样式全部没有效果。不光是 IE6 、IE7 ，甚至 IE8 、IE9预览版都没有效果。用 IE 浏览器测试下面的地址试试吧。

查看Demo

从测试页面可以看到有两条样式失效了，分别是：字体红色和下划线。奇怪的是把“导”字或“航”字删掉，样式就起效果了。更奇怪的是“导”字或“航”字他们的总数是基数的时候，如“/*导导航条*”或"/*导导导条*/"，是偶数的时候又失效，如“/*导航导航条*/”或“/*导导航航条*/”。

避免问题的方法还有：

统一编码
注释用英文或拼音
注释结束和开头与注释间留空格，如“/* 导航条 */”

最好的办法是统一编码，因为编码不统一，也许还有其他潜在的问题。

如果我们认为这个问题是中文文字引起的，那可能还会有其他文字会引起这样的问题。不过我国的文字有几万个，我们不可能一个一个去试，这只是根据上面情况的一种推测。

说说CSS Hack和向后兼容

青色 — Tue, 18 May 2010 16:46:46 +0000

人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。

在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：

权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码
可维护：在资源成本和完美间平衡的向后兼容
可读：省力、易记

这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。

先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）：

一、CSS 选择器 Hack

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}

这种写法的优缺点是：

优点：全面，各种HACK都有；清理无用代码里易认
缺点：选择器名称不易记；代码量多（要重复写选择器）

二、CSS 属性 Hack

.sofish {
	padding:10px;
	padding:9px\9; /* all ie */
	padding:8px\0; /* ie8-9 */
	*padding:5px; /* ie6-7 */
	+padding:7px; /* ie7 */
	_padding:6px; /* ie6 */
}

这种写法的优缺点是：

优点：易记；代码少
缺点：不全面

三、IE 注释

这种写法的优缺点是：

优点：安全；向后兼容好；易维护
缺点：用不好会增加HTTP请求；用得好代码又多

四、浏览器探测：JS/后端程序判断

// 以jQuery为例，检测是否是IE6，是则加上class="ie6"
if ($.browser.msie && $.browser.version = 6 ){
	$('div').addClass('ie6');
}

这种写法的优缺点是：

优点：全面；易维护；可读性高
缺点：占资源；代码量大（要重写选择器）

上面4种是我们最常用的方法。现在，让我们抽出心里存着的那3个原则，看看如何选择。要时间思考一下么？这里简单地说一下我的选择：

尽量使用单独HACK
这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；
向后兼容的目标：1年
你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px\0;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；
尽可能省资源
你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。

五、个人推荐写法

其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家参考的。

经济实惠型写法：注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)

.sofish {
	padding:10px;
	padding:9px\9; /* all ie */
	padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */
	*padding:5px; /* ie6-7 */
	+padding:7px; /* ie7 */
	_padding:6px; /* ie6 */
}

/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }

/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐）

HTML: 添加body class

.sofish { padding:10px;}
.non-ie .sofish { padding:12px;}
.ie9 .sofish { padding:9px;}
.ie8 .sofish { padding:8px;}
.ie7 .sofish { padding:7px;}
.ie6 .sofish { padding:6px;}

/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }

/* firefox */
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的或者@import会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一个都不能浪费。

至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表（via），可以参考参考：

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

/***** Selector Hacks ******/
/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#diez  { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
	#veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red } 

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red }

/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

其他的就不多说了。不过，还是要提醒一下: 注释也是很重要的。虽然是HACK了，但现实中情况有时候比想象中的复杂得多，给代码一个注释，好过千言万语。

最后，还是那句，希望看到你更好的方法！

文章转自：幸福收藏夹

原文地址：http://www.happinesz.cn/archives/1331/

css hack

青色 — Mon, 09 Nov 2009 06:43:25 +0000

css hack 是个很有争议的东西，一开始我也很讨厌，因为我觉得可以饶过 css hack，通过另外的方法解决问题。但是，随着工作中的不断实践，改变了我的观点，css hack 虽然不能通过 w3c 标准认证，但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。

在公司，电脑里的浏览器是 ie6，除了开发部和技术部外，其他部门的同事很少装其他浏览器（不过有小部分可能会升级到 ie7/ie8）。而开发部和技术虽然会装 ff，但装好之后一般不会升级，因为他们不一定是前端开发人员，他们装 ff 的目的也只是看看自己做的东西在 ff 下是否正常，所以这就导致了公司里有各个版本的 ie 和 ff 都有。其实这不是最严重的，因为我做的东西除了在 op 下可能会有些差异外，在上面所有浏览器和 sa 、ch 下都表现的很好。最严重的是之前的有些东西他们做的时候可能只考虑到 ie6，所以如果要修复的话，会把我给郁闷坏，因为我不仅要针对浏览器修复，还有可能要针对浏览器版本修复。如果是你的话，你会头疼吗？所以我收集了一些我认为是比较简单方便的 css hack，一来是自己在工作可能需要，二来算是分享吧。这些 css hack 注意顺序一起使用，能区分不同的浏览器和版本。当然，如果你没必要考虑这么复杂的情况，就挑选需要的用咯。通过实例来体现吧。

html 代码

您的浏览器是

css hack 代码

p { margin:0; padding:0 55px 0 0; height:30xp; line-height:30px; font-size:14px;}
p { background:url(llq.gif) 90px -170px no-repeat;} /* all */
p,x:-moz-any-link { background:url(llq.gif) 90px -80px no-repeat;} /* for ff */
p,x:-moz-any-link,x:default { background:url(llq.gif) 90px -140px no-repeat;} /* for ff2+ */
p {[;background:url(llq.gif) 90px -260px no-repeat;]}  /* for sa/ch */
p { background:url(llq.gif) 90px -50px no-repeat\9;}  /* for ie */
*+html p { background:url(llq.gif) 90px -20px no-repeat;} /* only for ie7 */
p { _background:url(llq.gif) 90px 10px no-repeat;} /* only for ie6 */

查看Demo

因为没有找到 op10 的 css hack，所以标准的写法是给 op10 的，然后针对其他浏览器写 css hack。

另外，在修复过程中，我发现了网上流传的一个 css hack 有问题，这个 css hack 也许有很多人在用，就是[属性：值\0]，有的人说这是 ie8 专用的，但我在测试过程中发现这个 css hack 除了 ie8 识别外，ff3 和 op10 也能识别（ff2 和 ff3.5 不能识别）。你可以使用对应的浏览器（如果你有的话）点击这个例子查看。

所以有些 css hack 还是尽量在多个浏览器里测试测试，以免误导别人。

注：op 代表 opera，sa 代码 safari，ch 代表 chrome。

用js模拟css属性选择器

青色 — Mon, 21 Sep 2009 01:21:22 +0000

CSS 的属性选择器是很有用的，它能有效的减少类的使用，但众所周知，IE6 是不支持 CSS 属性选择器的，为了兼容 IE6 ，一般的做法还是给需要的元素额外加类。如果是静态页面，那还好处理，直接在需要的元素上加上类，但如果是动态内容或其他因素影响，不能确定要在哪个元素上加类，那就比较棘手了。这个时候用 js 来处理应该是比较好的，方法也许您也想到了，就是：获取元素属性的值，然后判断值是否包含指定的字符串，如果包含就加上类。

做一个列子吧，就拿最近做的一个东西来做吧，是一个列表，如果这个列表中的某个连接是直接打开 pdf 文件，就给这个链接后面加上 pdf 的小图标，以示提醒作用。看代码吧，XHTML 和 CSS 代码就省略了，看主要的 JS 代码：

window.onload = function(){
	var list = document.getElementById('list');
	var listA = list.getElementsByTagName('a');
	for(var i = 0; i < listA.length; i++){
		var href = listA[i].href;
		if(href.indexOf('pdf') != -1){
			listA[i].className = 'haspdf';
		}
	}
}

查看Demo

因为这段代码主要针对 IE6 及以下版本，所以可以加上 IE 条件注释。

随机日志

CSS Expressions有多可怕

青色 — Tue, 08 Sep 2009 08:13:12 +0000

CSS Expressions 俗称 CSS 表达式，避免使用 CSS Expressions 是前端开发的一个重要指南，为什么要避免使用 CSS Expressions 呢？我们看看雅虎YUI的说明：

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕，那就引用子鼠的例子来实际说明吧：

XHTML 和 JS 代码：

JS 代码是用来计算 CSS Expressions 的计算次数。

CSS Expressions 表达式代码：

body {
	font-size:12px;
	font-family:Verdana;
	line-height:1.9
}
div a {
	display:block;
	border:1px solid #FF3366;
	width:expression(this.offsetWidth > 750 ? test() : test());
}

查看Dome （用 IE6/IE7 查看）

从上面的例子就可以明显的看到 CSS Expressions 的计算的如此的频繁，由此可见它的可怕。

子鼠还提供了一个稍好一点的写法：

body {
	font-size:12px;
	font-family:Verdana;
	line-height:1.9
}
div a {
	display:block; border:1px solid #FF3366;
	width:expression(function(abc){
		abc.style.width = "750px";
		test();
	}(this));
}

查看Dome （用 IE6/IE7 查看）

另外 CSS Expressions 的兼容性很差，所以 CSS Expressions 能不用就不用。

随机日志

HTML4和浏览器默认样式

青色 — Mon, 31 Aug 2009 16:05:29 +0000

HTML 4 标签：h1-h6,p,ul,ol,dl…即使没有给他们定义样式属性值，他们在浏览器中显示时，也会具有各种样式属性(主要是字体大小和各种间距)。这是因为它们各自有自己的默认样式，或者是浏览器给它定义了默认样式。各种版本的浏览器给他们定义的默认样式可能略有差别，下面列举的一些常见标签自身默认样式和在 Firefox 1.5 和 IE6/7 中的默认样式。

HTML样式

html, address,blockquote,body, dd, div,dl, dt,
fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6,
noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
/*以上均为块状显示，未列出为内联元素显示，部分元素在XHTML1中将废弃*/
li { display: list-item }/*默认以列表显示*/
head { display: none }/*默认不显示*/
table { display: table }/*默认为表格显示*/
tr { display: table-row }/*默认为表格行显示*/
thead { display: table-header-group }/*默认为表格头部分组显示*/
tbody { display: table-row-group }/*默认为表格行分组显示*/
tfoot { display: table-footer-group }/*默认为表格底部分组显示*/
col { display: table-column }/*默认为表格列显示*/
colgroup { display: table-column-group }/*默认为表格列分组显示*/
td, th { display: table-cell; }/*默认为单元格显示*/
caption { display: table-caption }/*默认为表格标题显示*/
th { font-weight: bolder; text-align: center }
/*默认为表格标题显示，呈现加粗居中状态*/
caption { text-align: center }/*默认为表格标题显示，呈现居中状态*/
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, object, select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }/*定义sub元素默认为下标显示*/
sup { vertical-align: super }/*定义sub元素默认为上标显示*/
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }
/*定义表头、主体表、表脚元素默认为垂直对齐*/
td, th { vertical-align: inherit }
/*定义单元格、列标题默认为垂直对齐默认为继承*/
s, strike, del { text-decoration: line-through }
/*定义这些元素默认为删除线显示*/
hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" }/*定义换行元素的伪对象内容样式*/
:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
 /* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
@media print { /*定义标题和列表默认的打印样式*/
    h1 { page-break-before: always }
    h1, h2, h3,    h4, h5, h6 { page-break-after: avoid }
    ul, ol, dl { page-break-before: avoid }
}

浏览器默认样式

1、页边距

IE 默认为 10px，通过 body 的 margin 属性设置；FF 默认为 8px，通过 body 的 padding 属性设置。要清除页边距一定要清除这两个属性值：

body {
	margin-top:0;
	margin-bottom:0;
}

2、段间距

IE 默认为 19px，通过 p 的 margin-top 属性设置；FF 默认为 1.12em，通过 p 的 margin-bottom 属性设。p 默认为块状显示，要清除段间距，一般可以设置：

p {
	margin-top:0;
	margin-bottom:0;
}

3、列表样式

IE 默认为 40px，通过 ul、ol 的 margin 属性设置；FF 默认为 40px，通过 ul、ol 的padding 属性设置。dl 无缩进，但起内部的说明元素dd 默认缩进 40px，而名称元素 dt 没有缩进。要清除列表样式，一般可以设置：

ul, ol, dd {
	list-style-type:none;/*清除列表样式符*/
	margin-left:0;/*清除IE左缩进*/
	padding-left:0;/*清除非IE左缩进*/
}

4、元素居中

IE 默认为 text-align:center ；FF 默认为 margin-left:auto;margin-right:auto 。

5、鼠标样式

IE 默认为 cursor:hand ；FF 默认为 cursor:pointer 。该声明在IE中也有效。

更详细的介绍，您可以查看这里：http://www.w3.org/TR/CSS21/sample.html

文章整理自网络

随机日志

margin叠加原理

青色 — Mon, 11 May 2009 16:32:20 +0000

margin 叠加是什么？就是当垂直外边距相遇时，它们将叠加，叠加的高度取较大的。下面按各种情况及附图来说明。

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：

元素的顶边界与前面元素的底边界发生叠加。

当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，如图：

元素的顶边界与父元素的顶边界发生叠加。

尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，如图：

元素的顶边界与底边界发生叠加。

如果这个边界碰到另一个元素的边界，它还会发生叠加，如图：

空元素中已经叠加的边界与另一个空元素的边界发生叠加。

边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了，如图：

边界叠加在元素之间维护了一致的距离。

margin 叠加只发生在普通文档流中块框的垂直，行内框、浮动框或绝对定位框之间的边界不会叠加。

margin 叠加虽然是合理的，但如果处理不当，会产生不期望的效果，解决的办法有以下几种：

用外元素的 pading 代替元素的 margin；
给外元素加透明边框，即：border:1px solid transparent; 也就是有分隔的时候不会产生 margin 叠加；
元素绝对定位；
外元素设置 overflow:hidden；
……

随机日志

超过宽度显示省略号（无js全兼容）

青色 — Sun, 22 Mar 2009 09:30:02 +0000

曾经发表过《我看超过部分自动隐藏或显示省略号》，表达了用 CSS 处理“超过宽度显示省略号”不合适的一些观点，然而前段时间在逛蓝色理想经典论坛的时候，发现了一种用 CSS 处理此问题的不错的办法，似乎反驳了我的观点，作者[14px ]突破了传统，以“范围底线”为思路创造了一种更好的办法，具体的思路请看以下的详细分析：

思路：

我们要达到的效果是：当“字符超过额定宽度”，则“显示三个小点”。

当“字符超过额定宽度”，对于页面来说可能发生的一个改变就是：换行！
换行将导致该范围的底线降低。
那么，我们的目的则可以换算成：该范围的底线降低时显示三个小点。

图片说明：

查看效果

上图是经过我（即29楼的“xfcmamb”）的优化之后，作者发布的第二个方案，要看作者的第一个方案及我第二次优化的方案请点击下面相应的链接：

原作者的方案：http://bbs.blueidea.com/thread-2915238-1-2.html

第二次优化的方案：http://bbs.blueidea.com/thread-2916138-1-1.html

在目前我所知道的方法中，我认为这种方法是最好的方法，但缺点还是有的，比如：要更具具体的行高制作合适的背景图片，也就是说如果图片做的不合适，“省略号”的显示位置可能会不合理。

如果您有什么观点或更好的办法，欢迎发表留言。

随机日志

百度有啊CSS圆角方案

青色 — Wed, 18 Feb 2009 15:37:13 +0000

百度有啊的 CSS 圆角写法，原理和《一张图片实现圆角》差不多，也是用背景定位实现的。看代码吧： XHTML 代码：


    
    
        圆角一

CSS 代码：

.box1 {
	background:url(images/bg1.gif) repeat-x #1d6cb7;
	margin-top:1em;
	position:relative;
	zoom:1;
	width:778px;
}
.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {
	width:5px;
	height:5px;
	position:absolute;
	background:url(images/bg3.gif) no-repeat;
	overflow:hidden;
}
.box1 .cc {
	height:40px;
	padding:5px;
}
.box1 .tl {
	left:0;
	top:0;
}
.box1 .tr {
	right:0;
	top:0;
	background-position:0 -5px;
}
.box1 .bl {
	left:0;
	bottom:0;
	background-position:0 -10px;
}
.box1 .br {
	right:0;
	bottom:0;
	background-position:0 -15px;
}

查看效果（上面的代码是第一个圆角的）

看看上面代码所用到的图片能更好的理解（下面）：第一部分是左上角的，第二部分是右上角的，第三部分是左下角的，第四部分是右下角的。

真正的CSS等高布局

青色 — Wed, 11 Feb 2009 15:05:08 +0000

为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：


	
		left
		left
		left
		left
		left
	
	
		center
		……（20个或更多个）
		center
	
	
		right
		right
		right

CSS 代码：

* {
	margin:0;
	padding:0;
}
#wrap {
	overflow:hidden;
	width:1000px;
	margin:0 auto;
}
#left, #center, #right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}
#left {
	float:left;
	width:250px;
	background:#00FFFF;
}
#center {
	float:left;
	width:500px;
	background:#FF0000;
}
#right {
	float:right;
	width:250px;
	background:#00FF00;
}

查看效果从效果中可以看到，左右两列虽然内容少，但高度和内容最多的中间列等高。其核心代码（拿本例来说）是：

#wrap {
	overflow:hidden;
}
#left, #center, #right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}

其中的 10000px 可以修改为其他值，但不能小于最高列的高度。经测试，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。方法很简单吧。从这里可以看出：看似简单的 CSS,其实并不简单。 ======= 华丽的分割线（2009/02/18） ================================== 前两天做网页的时候运用这样方法发现一个问题：如果子列有边框 border 属性的话，下边框不会将不显示（查看效果）。因为他们下面还有很长一部分，都被隐藏了，看图理解：

半透明部分都被隐藏了，所以看不到下边框。

随机日志

我看超过部分自动隐藏或显示省略号

青色 — Tue, 13 Jan 2009 07:57:56 +0000

文章列表或类似文章列表的区域，如果宽度不是很长，为了防止标题字数过多而换行或撑破容器，使布局错位，我们一般会让超过部分自动隐藏或显示成省略号。用程序很容易控制，但不利于 SEO ，所以很多人选择了 CSS 。但用 CSS 就没有问题了吗？我看未必。由于各个浏览器对 CSS 的支持不一样，所以出现了很多不兼容的情况，在这个问题上也一样。那到底会出现什么问题呢？

1、设置的是自动隐藏

自动隐藏，那肯定有一个参考的宽度。如果这个宽度不能正好的容纳标题，那么后面的字就会被“剪掉”，只显示半部分。也许你会说：那就设一个正好的宽度。但是你有没有想过：如果标题中有标点符号、英文字母或数字呢？标点符号还好解决，中文的标点符号和汉字的宽度一样。但英文字母和数字就不好解决了，英文和数字的宽度会因为字体、个数的不同而不同。这就使原本“正好的宽度”变成“不是正好的宽度”。

2、设置的是显示省略号

设置显示省略号就不会出现文字被“剪掉”的情况。但有的浏览器不兼容，不兼容的浏览器仍然可能出现换行或撑破容器的情况。

3、自动隐藏于显示省略号一起用

一般情况下都是自动隐藏于显示省略号一起用，但不显示省略号的浏览器仍然有可能出现文字被“剪掉”的情况。

下面看一个例子，请点击这里，这个例子出现了上面三种情况。下图是该例在能显示省略号和不能显示省略号的浏览器中的效果：

从效果图可以看到：能显示省略号的浏览器效果还不错，但不能显示省略号的浏览就出现了文字被“剪掉”的情况，而且“剪”的部分都不一样。

另：如果加上 -o-text-overflow:ellipsis ，Opera 也可以显示省略号。

虽然 IE6 、IE7 、Opera 、Chrame 都能显示省略号，但还是有一些不同。比如截取的字数不一样、链接下划线长度不一样。所以，由于目前种种情况，我认为用 CSS 并不合适。

随机日志

IE 8 beta 2不识滤镜alpha ？

青色 — Sat, 03 Jan 2009 17:19:17 +0000

前几天《CSS制作仿image menu效果》的第二个有提示的例子（点击这里查看），为了防止图片与文字颜色一样是，文字难以看清，所以使用了滤镜和属性 opacity 制作了半透明效果，然而用 IE 8 beta 2 浏览时却没有效果，如下图：

我又用 IE 8 beta 2 查看以前《制作半透明效果》的例子，也是没有效果。其他浏览器都没有问题，为何 IE 8 beta 2 却没有效果？难道 IE 8 beta 2 连自家的滤镜都不认识？但是我曾经看过一个也使用了 alpha 滤镜例子，在 IE 8 beta 2 里有效果。难道是我的例子不兼容 IE 8 beta 2 ？于是我试图修改代码，然而无论我增加或删除某些属性，始终没有效果。最后来了个狠的——把 DOCTYPE （最顶上的那行）声明删掉，终于，IE 8 beta 2 里有效果了。

效果是有了，但 DOCTYPE 声明是不能删的啊。删了的话，兼容就是个问题了，最起码盒子模型的解释都不一样（详情请查看《用标准W3C盒子模型》）。就为了 IE 8 beta 2 ，而使例子在 IE 系列浏览器中都错位，不值得。当然可以用 CSS hack ，但是不推荐。更好的解决办法我认为是：1）使用 jQuery ；2）把提示文字定位到其他地方。

才用 IE 8 beta 2 没多久，就发现几个问题，看来 IE 8 beta 2 真是不怎么样，希望正式版会更好。

随机日志

CSS制作仿image menu效果

青色 — Tue, 30 Dec 2008 16:59:48 +0000

image meun 是一种很不错的效果，让菜单以图片的形式呈现，给网页增色不少。这种效果一般由 js 制作，今天我们用 CSS 来制作类似的效果，先看下效果图：

基本思路

其实很简单。把 img 标签放到 a 标签里面，给 a 标签设置一个较小的宽度，并且设置超过部分隐藏。当鼠标经过 a 标签时，把 a 标签的宽度改变为与图片大小相同。

代码实现

XHTML 代码：

CSS 代码：

* {
	margin:0;
	padding:0;
}
img {
	width:240px;
	height:300px;
	border:none;
	display:block;
}
ul {
	width:384px;
	margin:20px auto;
	list-style:none;
	background:#e6e6e6;
	border:7px solid #e6e6e6;
	overflow:hidden;
}
li {
	float:left;
}
a {
	position:relative;
	display:block;
	width:48px;
	text-decoration:none;
	color:#000;
	overflow:hidden;
	cursor: default;
}
a:hover {
	width:240px;
}
a:hover {
	background:no-repeat;
}

查看Demo

当然，和 js 制作的相比，还是差点，比如 js 制作的有动画缓冲效果，用户体验好些。

再看一个有提示的例子，查看Demo

随机日志

别说IE6不认识!important

青色 — Sat, 27 Dec 2008 10:59:55 +0000

别说IE6不认识 !important ,它们只是不够默契。

IE6 对 !important 的支持存在 bug ，有很多人因此作为 IE6 的 hack 。用多了，传多了，很多人就说 IE6 不支持 !important ，给新人带来一些影响。

在《IE6下!important的bug》中已经说了这个问题，现在再举几个例子说明这个问题，以下面的 XHTML 代码为例：

这里是第一行文字

那这里就是第二行文字咯

这里应该是第三行里吧

这里绝对是第四行了

第一个例子的 CSS 代码：

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
#list li{
color:blue;
}
.first{
color:red !important;
}

点击这里查看效果

在 IE6 里，第一行文字为红色，!important 起作用了。如果 .first 不加 !important ，那么在所有浏览器中第一行都显示蓝色，因为 #list li 的权重比 .fisrt 高。当然 .first 改写成 #list .first 会更好，但为了举例子，所以不这样写。

第二个例子的 CSS 代码：

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
.first{
color:red !important;
}
.first{
color:blue;
}

点击这里查看效果

同样，!important 在 IE6 里起效果了。

再看第三个例子的 CSS 代码：

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
.first{
color:red !important;
color:blue;
}

点击这里查看效果

这次 !important 在 IE6 里就不起效果了。

综合上面三个例子得出这么一个结论：在同一个选择器内有重复的属性的话，此选择器内的此属性的 !important 在 IE6 里无效。

所以，并不能说 IE6 不支持 !important ，只是支持的不够好。

CSS3圆角属性和浏览器私有圆角属性

青色 — Sun, 21 Dec 2008 02:23:40 +0000

随着网络的发展，CSS 也在不断的完善，充分吸取多年来 Web 发展的需求，提出了很多新颖的 CSS 特性，例如很受欢迎的圆角矩形 border-radius 属性，但很可惜，此属性目前没有得到任何浏览器的支持。

对于一些浏览器，它们有其私有的圆角属性。如 FF 的 -moz-border-radius ，Safari 和 Chrome 的 -webkit-border-radius 。效果见下图：

FF 的圆角

Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核，这里就只附 Chrome 的效果了)

IE 和 Opera 就没有私有的圆角属性了，如果有的话，那制作圆角应该就简单多了，把各自的私有属性全部写上，让各个浏览器“对号入座”，就达到了“兼容”的效果。

用CSS滤镜制作圆角

青色 — Tue, 16 Dec 2008 07:56:02 +0000

今天来用 CSS滤镜来制作圆角效果。正如你所知道的，CSS滤镜只有 IE 浏览器支持，所以这种方法不能真正的用到实际当中，所以就当做是了解一下咯。

首先来看一个例子，点击这里查看（用 IE 浏览器喔）。

看了上面的例子，也许你就知道制作的原理了。我们只用《一张图片实现圆角》例子中圆圈图片的1/4（左上部分）：，放 4 张，对相应的图片进行相应的翻转，然后定位到父容器的相应位置，就实现了圆角。

代码实现

XHTML代码：

CSS滤镜制作圆角

CSS代码：

*{
margin:0;
padding:0;
}
#box{
position:relative;
width:400px;
margin:20px auto;
border:1px solid #000;
}
img{
position:absolute;
}
.img1{
left:-1px;
top:-1px;
}
.img2{
right:-1px;
top:-1px;
filter:fliph;/*水平翻转*/
}
.img3{
bottom:-1px;
left:-1px;
filter:flipv;/*垂直翻转*/
}
.img4{
right:-1px;
bottom:-1px;
filter:fliph flipv;/*水平垂直翻转*/
}
h3{
padding:20px 0;
text-align:center;
}

查看效果

和《一张图片实现圆角》一样，如果父容器的高度为基数，圆角在 IE6 里下方也会出现一条横线。

hoverbox

青色 — Mon, 15 Dec 2008 06:53:09 +0000

前两天在的 Nathan Smith 的博客上看到他的 hoverbox ，觉得非常的精彩。这是一个图片集，当鼠标移动到每张小图片上，就会有一张大图片出现。他的制作原理是：在标签 a 里放两张一样的图片，第一张图片设置成较小的尺寸，第二张先隐藏，当鼠标移动到第一张图片上时，就让第二张图片显示。原文地址和例子地址如下：

原文地址：http://sonspring.com/journal/hoverbox-image-gallery

例子地址：http://host.sonspring.com/hoverbox/

效果预览：

从上面的例子可以看到，为了兼容 IE6 ，用了两张样式表。我在想：能不能只用一张样式表？我把他的两张样式表合在一起后，在 IE6 、IE7 、FF 、opear 中浏览没有任何问题，然而在 Chrome 中去没有效果了。我就在想：能不能修改修改，只用一张样式表，并且能在上述所有浏览器中实现效果。经过多次修改实验后，终于实现了。我给第二张图片套了一个 span 标签，CSS 代码也做了一定的修改。详细例子请点击这里查看。

原先我一直都认为 CSS 没有逻辑性，所以不会有太大的灵活性或可变性（不知道用词是否恰当），但现在却越来越觉得：CSS 虽然是死的，但人是活的。活生生的人有各种各样不一样的想法。就如的这个例子，要制作这种效果，我们一般会想到 javascript ，但他却突破常规，完全只用 CSS 。

=======华丽的分割线=========================================

读者“老鼠”提出上面修改的例子不兼容 IE8 beta 2 ，所以特意装上了 IETester 进行查看，看到确实不行。在 IE8 beta 2 里的效果是：鼠标第一次移动到小图片上的时候，效果正常，大图片出现在了指定的位置。然而第一次之后，大图却跑到浏览器左上角去了，似乎第一次之后，大图的绝对定位是以浏览器窗口为基准。经过检查之后，发现是 .img1{display:block} 导致的，原本此属性是为了修复 img 3px bug 的，没想到却导致在 IE8 beta 2 里出现异常（不知道这算不算 IE8 的 bug），让人不能理解。既然这条属性有问题，那就换一种解决办法，改成 .img1{vertical-align:top} ,次属性也能修复 img 3px bug ,并且使例子在 IE8 beta 2 里正常。修复后的例子请点击这里查看。

再次感谢“老鼠”的测试！（2008.12.18）

随机日志

一张图片实现圆角

青色 — Fri, 12 Dec 2008 06:55:33 +0000

一张图片就能实现圆角？是什么样的图片？怎样实现？

其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片：，太小了是吧，不过已经够了。

基本思路

准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。

图片示意：

代码实现

XHTML代码：

一张图片实现圆角

四个 b 为小容器，不要管它们，放上去就是了。

CSS代码：

*{
margin:0;
padding:0;
}
#container{
position:relative;
margin:20px auto;
padding:20px;
width:400px;
height:50px;
border:1px solid #000;
}
b{
position:absolute;
width:5px;
height:5px;
font-size:0;
background-image:url(images/yuan8.jpg);
background-repeat:no-repeat;
}
.lt{
left:-1px;
top:-1px;
background-position:left top;
}
.rt{
right:-1px;
top:-1px;
background-position:right top;
}
.lb{
left:-1px;
bottom:-1px;
background-position:left bottom;
}
.rb{
right:-1px;
bottom:-1px;
background-position:bottom right;
}
h1{
text-align:center;
font-size:24px;
}

查看效果

这种方法似乎很完美，但遗憾的是：如果父容器（本例为 #container）的高度为基数时，在 IE6 里下方会出现一条横线，如下图：

所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。

另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例中不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美（IE bug 真多 -_-!）。

上下两张图片CSS圆角

青色 — Sun, 07 Dec 2008 12:11:52 +0000

与无图 CSS 圆角相比，上下两张图片 CSS 圆角就比较容易制作了，即用切图软件把圆角的上半部分、下半部分分别切出来，然后放到网页中。效果图如下：

圆角上半部分和下半部分图片：

上下两张图片和中间元素的左右边框就组成了完整的圆角。

例子代码

XHTML代码：

有图CSS圆角

XHTML代码不一定要这样写，您可以根据您的实际情况写出更有语义的XHTML代码，这里这样写是为了更好的理解这种制作方法。

CSS代码：

*{
margin:0;
padding:0;
}
#box{
width:415px;
margin:20px auto;
}
#top{
height:5px;
overflow:hidden;
background:url(images/top.gif);
}
#bottom{
height:5px;
overflow:hidden;
background:url(images/bottom.gif);
}
#content{
border-left:1px solid #000;
border-right:1px solid #000;
}
h1{
font-size:16px;
padding:20px;
text-align:center;
}

查看效果

#top 放圆角上半部分图片，#bottom 放圆角下半部分图片，#content 设置左右边框，合起来就成了完整的圆角。

3D效果CSS圆角

青色 — Sun, 07 Dec 2008 11:54:07 +0000

先看效果吧：

这种3D效果CSS圆角和《流行的CSS圆角》制作方法是一样的，只是左右上下边框颜色不一样，左上浅，右下深，看上去有阴影，因此就产生了这种3D效果。

既然制作方法和《流行的CSS圆角》一样，这里就不啰嗦了，下面给出相应的代码。

XHTML代码：

3D效果CSS圆角

CSS代码：

*{
margin:0;
padding:0;
}
.box{
width:400px;
margin:20px auto;
}
h1{
font-size:2em;
color:#fff;
padding:20px;
text-align:center;
}
b{
display:block;
overflow:hidden;
height:1px;
background:#96C2F1;
border-width:0 1px;
border-style:solid;
}
.b1{
margin:0 5px;
background:#fff;
border:none;
}
.b2{
border-right:#eee;
}
.b3{
border-right:#ddd;
}
.b4{
border-right:#aaa;
}
.b4b{
border-left:#eee;
}
.b3b{
border-left:#ddd;
}
.b2b{
border-left:#aaa;
}
.b2,.b3,.b4{
border-left-color:#fff;
}
.b4b,.b3b,.b2b{
border-right-color:#999;
}
.b2,.b2b{
margin:0 3px;
border-width:0 2px;
}
.b3,.b3b{
margin:0 2px;
}
.b4,.b4b{
height:2px; margin:0 1px;
}
.b1b{
margin:0 5px;
background:#999;
border:none;
}
.content{
background:#96C2F1;
border-left:1px solid #fff;
border-right:1px solid #999;
}

查看效果

由于不同的边框要设置不同的颜色，所以 CSS 代码较多，容易混淆，请多看几遍。

更多例子：

流行的CSS圆角

青色 — Sat, 06 Dec 2008 11:45:18 +0000

这是比较流行的CSS圆角，制作方法和理解都有困难，但看完这篇文章，就能掌握这种方法。

先看效果：

制作方法

为了更好的理解，先用简单的代码为例。

XHTML代码：

CSS代码：

b{
display:block;
}
.b1,.b2,.b3,.b4{
overflow:hidden;
height:1px;
border-left:1px solid #000;
border-right:1px solid #000;
}
.b1{
margin:0 5px;
background:#000;
}
.b2{
margin:0 3px;
border-width:0 2px;
}
.b3{
margin:0 2px;
}
.b4{
height:2px;
margin:0 1px;
}

这段代码效果如下图：

.top 是一个容器，.b1 是圆角顶部的横线，.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ，他们便组成了圆角圆弧中的几个点。合在一起，就组成了上半部分的圆角。看下面的动态图就能很好的理解了。

为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 1px、2px 就不容易看出锯齿了。

下半部分和上半部分的原理是一样的，只是“倒”过来了。

完整的代码

XTHML代码：

内容区

CSS代码：

查看效果

注意各个数值的设置。

用js让“footer”处于底部

青色 — Tue, 02 Dec 2008 08:53:40 +0000

当一个网页比较简单，内容比较少使得网页不足浏览器高的时候，为了显示更合理，我们希望让 footer 部分显示在浏览器的底部。先前介绍了《使用CSS定位页面的“footer”》，现在来用 javascript 来实现这种效果。

基本思路

以常见的架构来为例，容器 #container 内有上中下三部分，分别为 #header 、#content 、#footer。首先分别获取容器 #container 和浏览器的实际高度，如果容器 #container 的高度小于浏览器的高度，就让 #footer 绝对定位到底部。

代码实现

XHTML 代码：

content

javascript 代码：

解释一下两个重要的属性 scrollHeight 和 clientHeight：

scrollHeight 层的实际高度，实际有多高就多高，与当前网页高度无关；

clientHeight 层在当浏览器屏幕的高度，非该层的实际高度。

为了让例子效果更明显，再加上一些 CSS 代码：

*{
margin:0;
padding:0;
}
#header{
background:#ff0000;
}
#content{
background:#00CCFF;
}
#footer{
background:#FFCC00;
width:100%;
}

这样，如果网页的高度小于浏览器的高度，那么 footer 部分就会定位到底部。

查看效果

使用CSS定位页面的“footer”

青色 — Sat, 29 Nov 2008 06:27:09 +0000

基本思路

首先考虑外层设置一个容器 div ，id 设为 #container ，使他的高度为浏览器窗口的高度，然后将 #footer 这个 div 设置为 #container 的子 div，并使用绝对定位的方式，使他固定到 #container 的底端，以实现希望的效果。

点击这里察看案例页面效果。改变浏览器的高度和宽度，可以看到 Footer 部分的效果。

代码实现

下面先考虑HTML结构，这个演示页面的HTML代码非常简单。

Content

请改变浏览器窗口的高度，以观察footer效果。

这里是示例文字，………，这里是示例文字。

然后设置CSS，

body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#container {
min-height:100%;
position: relative;
}
#content {
padding: 10px;
padding-bottom: 60px;
/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}

1：首先要给 html 和 body 元素设置高度（height属性）为100% （第5行），这样先保证根元素的高度撑满整个浏览器窗口，然后下面才能使 #container 的高度撑满整个浏览器窗口。至于为什么用同时设置 html 和 body 元素，是因为 Firefox 和 IE 认为的根元素不一样，因此这里都给他们设置上。

2：然后把 #container 的高度也设置为 100% （第8行），但是要注意，这里使用了“min-height”属性，而不是普通的 height 属性，这是因为我们要考虑到，如果 #content 中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把 #container 的高度仍然是 100%，就会导致 #footer 仍然定位在浏器窗口的下端，从而遮盖了 #content 中的内容。而使用 min-height 属性的作用就是使 #container 的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。

但是需要说明的是，在 Firefox 和 IE7 中，支持 min-height 属性，而 IE6 中，并不支持 min-height 属性，但是“歪打正着”的是，IE6 中，会把 min-height 属性解释为 height 属性，但是 IE6 中 height 属性的效果却是 min-height 本来应该具有的效果，也就是说，在 IE6 中，子 div 的高度会撑大父 div 的高度。所以这样正好可以实现在 IE6、IE7 和 Firefox 中都可以正确实现我们希望的效果了。

3：接下来，将 #container 设置为相对定位（第9行），目的是使他成为它里面的 #footer 的定位基准，也就是所谓的“最近的定位过的祖先元素”。

4：然后把 #foooter 设置为绝对定位（第17行），并使之贴在 #container 的最下端（第18行）。

5：但是要注意，如果当我们把 #foooter 贴在 #container 的最下端以后，他实际上已经和上面的 #content 这个div 重叠了，为了避免覆盖 #content 中的内容，我们在 #contetn 中设置了下侧的 padding，使 padding-bottom 的值等于 #footer 的高度（第13行），就可以保证避免覆盖 #content 的文字了，这个高度的计算注意代码中的注释中给出的计算方法（第14行）。

点击这里察看案例页面效果。

文章摘自：前沿视频教室

原文地址：http://learning.artech.cn/20080328.css-footer-position.html

随机日志

修改：自动播放的jQuery幻灯片 (7)
css hack (19)
CSS选择器的优先级 (0)
一张图片实现圆角 (5)
HTML 5新标签 (3)
jQuery EasyUI (4)
Mozilla公布Firefox占有率数据全球接近30% 俄罗斯达到60% (3)
IE条件注释续 (2)
纯css下拉菜单详解 (12)
HTML4和浏览器默认样式 (0)

ie img 3px bug

青色 — Sat, 22 Nov 2008 05:39:47 +0000

ie img 有 3px 的缝隙也是 ie 的经典 bug 之一，相信已经不陌生了，但还是先看看效果吧（也许你并没有见过）：

效果1 效果2

效果1 图片下方有缝隙，这是最常见的；效果2 则不但下面有，右边也有，并且在 FF 和 opera 里，下方也有缝隙。这是因为效果2 图片的父元素是内联元素。

这个缝隙的大小网上说是 3px ，其实在 ie 里是 4px （你可以设置图片父元素的负 margin 测试），而效果2 在 FF 里下方有 3px 的缝隙，在 opera 里下方有 2px 的缝隙。

这个小缝隙在有些情况并不会造成太大的影响，不修复也没有关系；但如果对有些情况影响较大，那就不得不修复了。修复方法有很多：

1、改变XHTML排版，让 img 的后面紧跟标签（若没有文字的话），如：

而不是：

2、为 img 设置 display:block ；

3、为父元素设置 font-size:0 ；

4、为 img 设置 vertical-align 属性，值可以是: top|bottom|text-top|text-bottom （其他值效果不好或没有效果）。

但是：

如果图片的父元素是内联元素的话，选择第 3 种方法，在 ie 里右边仍有 1px 的缝隙，而在 opera 里下方仍有 2px 的缝隙，请用相应的浏览器查看下面的效果：

查看效果

如果图片的父元素是内联元素的话，选择第 4 种方法，在 ie 里只能修复下方的缝隙，而右边的缝隙则不能修复。看效果：

查看效果

如果图片的父元素是块级元素的话，上面 4 种方法都能完全修复此 bug 。但为了保险，选择第1 、第2 种方法更妥当。

用CSS制作彩色文字

青色 — Thu, 20 Nov 2008 08:37:22 +0000

网页上的文字和美观的图片相比似乎显得比较单调，因为文字只有颜色、字体、大小等效果。那如何才能让文字更有特点呢？那就让文字变成彩色的吧，不过不是每个文字设置不同的颜色（当然也有这样的，比如google的logo，虽然用的并不是文本，但用文本也可以实现），是文字的上半部分和下半部分颜色不用。先看一下效果吧：

其实这里有两个相同的但颜色不同文本，他们重叠在一起了，一个显示上半部分，一个显示下半部分，合在一起就达到了彩色的效果。

所用到的关键属性是 clip ,此属性 CSS手册上的说明是：

语法：

clip : auto | rect ( number number number number )

取值：

auto : 默认值。对象无剪切

rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切

说明：

检索或设置对象的可视区域。可视区域外的部分是透明的。

此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ，此属性方可使用。

我们一步一步来做。先做上半部分的文字：

XHTML代码：

多彩文字 multicolor

CSS代码：

.textTop{
color:#cc0000;
font-size:24px;
clip:rect(auto auto 15px auto);
position:absolute;
}

查看效果，效果如下图左边所示。

下半部分：

XHTML代码（除了 class ，其他和上面相同）：

多彩文字 multicolor

CSS代码：

.textBottom{
color:#3399ff;
font-size:24px;
clip:rect(15px auto auto auto);
position:absolute;
}

查看效果，效果如下图右边所示。

把代码合在一起，就达到了最终的效果：

XHTML代码：

多彩文字 multicolor
多彩文字 multicolor

CSS代码：

.container {
position:relative;
}
.container a{
position:absolute;
font-size:24px;
}
.textTop{
color:#cc0000;
clip:rect(auto auto 15px auto);
}
.textBottom{
color:#3399ff;
clip:rect(15px auto auto auto);
}

查看最终效果，最终效果如最上图所示。

随机日志

制作半透明效果

青色 — Mon, 17 Nov 2008 06:44:08 +0000

半透明效果越来越常见，如果应用的好的话，能给网页带来很美观的效果。

由于各个浏览器差异，所以半透明效果实现起来还是有一点麻烦的。

IE 使用滤镜，即 filter:alpha(opacity=x) ，x 取值范围为 0 - 100 。默认值为 100 ，不透明。 0 为完全透明。

FF 使用其私有属性：-moz-opacity ，其后直接加数值，取值范围为 0.0 - 1.0 。默认值为 1 ，不透明。 0 为完全透明。

CSS3 半透明属性 opacity ，其后也是直接加数值，取值范围同样为 0.0 - 1.0 。

虽然 IE 和其他浏览器实现的方法不一样，但一起用，就都有效果了。看例子：

XHTML代码：

CSS代码：

#wrap{
background:#FF0000;
}
#box{
background:#fff;
filter:alpha(opacity=60); /* for ie */
opacity:0.6; /* for ff or other */
width:100%;
}

虽然 FF 有私有属性设置半透明效果，但它支持 CSS3 标准半透明属性 opacity ，那当然选择标准了。

查看效果

从效果里可以看到子元素的半透明效果，透出了父元素的背景颜色。

要注意的是：必须给需要半透明的元素设置背景颜色为白色，否则没有效果。而对于 IE 又还需要设置宽度或高度属性，否则也没有效果。如上例把 width:100% 去掉则没有效果。

还需要说明的是：IE 滤镜不能通过 W3C 验证。

一个更具体的例子

纯css下拉菜单详解

青色 — Mon, 10 Nov 2008 07:09:51 +0000

下拉菜单由于实用，所以受到人们的欢迎。下拉菜单通常是由 javascript 来实现的，也应该由 javascript 来实现，因为这属于行为层范围。然而大家知道，使用 CSS 的 :hover 伪类也可以制作下拉菜单，比起 javascript 来，使用 CSS 制作更简单，且更容易理解。但由于 IE6 只有 a 标签支持 :hover 伪类，所以又给这种带来了“阻碍”。不过大家还是比较喜欢纯 CSS 下拉菜单，现在我们就利用 IE条件注释来制作一个纯 CSS 下拉菜单。为了便于理解，选择了很很简单的代码，至于更复杂的，大家可以触类旁通、举一反三。

XHTML 代码：


	一级菜单
	二级菜单
	二级菜单
	二级菜单

CSS 代码：

dd { display:none; }
dl:hover dd { display:block; }

查看Demo

在 IE7 和 FF 等标准浏览器中，下拉菜单可以正常使用，但 IE6 中却没有效果。既然 IE6 只有 a 标签才支持 :hover，那就加上 a 标签。XHTML 代码改写成:



	一级菜单
	二级菜单
	二级菜单
	二级菜单

CSS 代码改写成：

dd { display:none; }
dl:hover dd, a:hover dd { display:block; }

查看Demo

然而在 IE6 中依然没有效果，为什么呢？难道代码有错？其实代码没有错，这是 IE6 的 BUG，关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG，这里给 a:hover 加 border:0，即 CSS 代码再次改写成：

dd { display:none; }
dl:hover dd, a:hover dd { display:block; }
a:hover { border:0; }

查看效果

此时在 IE6 中鼠标移动到上面下拉菜单出现了。然而给每个菜单加上连接的时候，IE6 里又不行了，为什么？为什么？不知道。。。不过再给 IE条件注释里的 a 标签里再套上一个表格，即 XHTML 代码改写成如下：



	一级菜单
	二级菜单
	二级菜单
	二级菜单

查看Demo

此时，下拉菜单在 IE6 里没有问题了。

更多例子：

IE条件注释续

青色 — Thu, 06 Nov 2008 11:51:47 +0000

上次发表的《IE条件注释》一直都觉得不完整，还存在一个问题，即：如何让非 IE 浏览器显示 IE 条件注释里的内容。曾经在嗷嗷的博客里看到相关方法，可今天再去已经没有了（难道我记错了？）。还好又在蓝色理想里一种方法（似乎比嗷嗷的更好些），这种方法是把 IE 条件注释和 HTML 的注释一起使用，以达到“欺骗”浏览器的效果。具体看例子：

XHTML代码：

这段文字非IE浏览器可以显示

以上代码 IE 浏览器识别 IE 条件注释，其解释为：如果不是 IE 浏览器则显示其中的内容，所以 IE 浏览器不显示其中的内容；而非 IE 浏览器则只识别 HTML 注释，即“”之间的会被看成是注释，并且是完整的解释，所以非 IE 浏览器显示了其中的内容。

随机日志

css2高级选择器

青色 — Sat, 01 Nov 2008 12:34:20 +0000

用 css 控制页面，必须用好选择器，否则可能会因为 css 的继承及权重等特性而得不到想要的效果。常用的 css 选择器有：标签选择器、类选择器、ID选择器。我们所见到的选择器几乎都是这三种。然而 css2 还有其他选择器，如：子选择器、相邻选择器、属性选择器，用好这些选择器，能少定义 class 或 id。那么这些 css 高级选择器怎么使用呢？

1、子选择器

子选择器，顾名思义就是选择一个元素的子元素，不包括子元素的子元素。它的符号是大于号“>”。如：

XHTML代码：

链接1链接2

CSS代码：

p>a{
color:#ff0000;
}

你可以点击这里查看效果。

显示效果为“链接1”是红色，而“链接2”则不受影响。如果把“>”换成空格的话，那么css的继承特性会使两个 a 应用样式；如果不用子选择器的话，那就不得不给第一个 a 定义 class 或 id。

2、相邻选择器

相邻选择器就是选择相邻的标签，它的符号是“+”。这里会出现两中情况：

1）如果相邻的两个标签不同，则应用到后一个标签的第一个的标签；

2）如果相邻的两个标签相同，则应用到该标签的除第一个以外的标签（语句有点拗口，看实例能更好的理解）。

以下面的XHTML为例子：

这是标题

这是第一个段落

这是第二个段落

这是第三个段落

针对第一种情况：

h2+p{
color:#ff0000;
}

查看效果。效果是第一个p为红色。

针对第二种情况：

p+p{
color:#ff0000;
}

查看效果。效果是除第一个p外的p为红色。

3、属性选择器

属性选择器是针对HTML标签中的属性进行选择的。例：

XHTML代码：

网站首页

关于本站

友情链接

CSS代码：

a[title]{
text-decoration:none;
}
a[title="home"]{
color:#ff0000;
}

查看效果

a[title] 是选择定义了 title 属性的 a 标签，a[title="home"] 是选择定义了 title="home" 的a标签。另：属性可以不加双引号，也可以是单引号，如 a[title="home"] 也可以写成 a[title=home] 或 a[title='home'] 。

从例子中可以看到这三个选择器确实能减少网页中的class或id，但遗憾的是 IE6 均不支持。万恶的 IE6 。不过 IE6 的使用者正在减少，虽然速度比较慢，但这个趋势是不可避免的。

再谈overflow清除浮动

青色 — Tue, 21 Oct 2008 13:25:36 +0000

overflow是一种很好的清除浮动的方法（至少我这么认为），先前发表的《三种有效的清除浮动的方法》里介绍了这种方法，从发表到现在也有一段时间了，这期间在其他地方也看到介绍overflow清除浮动文章，但和《三种有效的清除浮动的方法》里面的不太一样，下面就再说说overflow清除浮动。

以下面的XHTML代码为例：

我以前用的方法是（CSS代码）：

#container{
width:1000px;
overflow:hidden;
background:#999999;
}
#left{
width:70%;
height:500px;
float:left;
background:#ff0000;
}
#right{
width:28%;
height:500px;
float:right:
background:#0000ff;
}

这种方法有效的清除了浮动，但 IE6 里没有效果，所以为了兼容 IE6 ，需要为父元素设了一个宽度，并且是一个合适的宽度。

再一种方法是把 overflow:hidden 换成 overflow:auto ，但 IE6 仍然没有效果，为了兼容 IE6 ，还是要做“手脚”，可以为父元素加上 height:1% 或 zoom:1 ，有人说 height:1% 应该写成 _height:1% ，但我并没有发现不加_符号有什么影响。而 zoom:1 则不能通过W3C验证。

总结一下：清除浮动可以用 overflow:hidden 或 overflow:auto ，在比较标准的浏览器里没有问题，但 IE6 没有效果，为了兼容 IE6 ，可以为父元素：

1、设置一个合适的宽度，但“合适的宽度”有的时候不好掌握；

2、加上 height:1% ，什么都不用管，加上就有效，我还没有发现缺点；

3、加上 zoom:1 ，不能通过W3C验证。

为了兼容 IE6 的这三种方法根据自己的实际情况和个人喜好选择吧。

随机日志

:hover伪类在IE6中的BUG

青色 — Mon, 20 Oct 2008 07:31:28 +0000

:hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。

或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 :hover 的规则：

在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。

在 CSS2 中此伪类可以应用于任何对象。但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。

当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加 a 元素等来模拟完成最终的效果。

或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择 IE6 为例讲解）。

我们先用 CSS2 的写法来实现：

XHTML 部分：


	鼠标移过来触发我吧！哈哈，终于被你发现了！

CSS 部分：

* { margin:0; padding:0;}
ul { list-style:none; margin:100px;}
li { height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a { display:none;}
li:hover a { display:block; text-decoration:none; width:100px; height:100px; background:#c00;
position:absolute; top:50px; left:50px; color:#fff;}

大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中，可以显示我们所要达到的效果，但在 IE6 中却无法实现。

下面让我们换一种思维，所用 CSS1 的写法来看看，这个时候由于无法支持 li 元素 :hover 的使用，我们只好把所有文字包含到 a 中，对 a 使用 :hover ，并且将要显示隐藏的部分放到 span 元素中，首先我们对 XHTML 进行部分调整，调整如下：

XHTML 部分：


	鼠标移过来触发我吧！哈哈，终于被你发现

CSS 中我们将 a 的设置成块级元素，并使 a 的大小和宽度和 li 的相同，并设置 a 为相对位置，用 a 来模拟上例中的 li ；而用 span 来模拟上例中的 a ，设置 span 在默认情况下隐藏（display:none;），当 a 被触发时（:hover），则 span 显示（display:block;）

CSS 部分：

* { margin:0; padding:0;}
ul { list-style:none; margin:100px;}
li { height:100px; width:100px; background:#000; font-size:12px;}
li a { display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;}
li span { display:none;}
li a:hover span { display:block; width:100px; height:100px; background:#c00;
position:absolute; top:50px; left:50px; color:#fff;}

可我们发现上例中的效果，在 IE6 中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是 IE6 浏览器连 CSS1 也不支持？很多疑问从四面八方跑来了……

那到底是什么问题呢？

不是标准说明的错，也不是 IE 浏览器不支持 CSS1，而是 IE 浏览器自身解析的问题，是 IE5.5 和 IE6 中伪类 :hover 的 bug。

那又该如何解决这个问题呢？

这个 bug 可以通过在链接的属性中增加某些特殊的 CSS 属性声明来消除。

下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些 bug。

对 CSS 代码我们增加：

li a:hover {}

对其属性我们仅设定 width:100px; 发现在 IE6 中依旧没有变化，我们尝试着更改 width 的 value ，比如使其 width:99px，奇怪的事情发生了，在 IE6 中，隐藏的部分在触发的时候显示出来了。我们再对 li a:hover 的属性仅设定 color 来测试（初始值为 #fff），更改 color 值，发现在 IE6 下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！

我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

我们发现除了 text-decoration，color，z-index 不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类 :hover bug 的特定属性。

说明：

对于 dispaly 不可以用本例来测试，可另外写个更简单的例子（去除 ul/li，a 和 span 中的 position ）。在实际应用中怿飞不建议改变 display 值来做为特定属性消除此 bug，而且在某些例子中此属性不一定能消除 bug。
对于做为特定属性的 border 和 background 中的颜色我们还可用全写和简写来改变，如 #fff 和 #ffffff 在消除 bug 中解析为 2 个不同的值。

文章转摘自：PlanABC - 怿飞’s Blog

原文地址：http://www.planabc.net/2007/02/15/ie_hover_bug/

门户网站与大型网站的CSS架构与组织

青色 — Sun, 19 Oct 2008 04:22:53 +0000

对于大型门户，海量信息平台及多模块，多区域化网站，更需要对CSS，XHTML的标准化，符合语意的HTML框架，复用性强的CSS代码，这些才能保障你的网站，具有很好的“地基”。

第一部：关于构建CSS框架我们要实现的目的：

1.实现标准化，具备主流平台适应性的前端实现；
2.快速开发，在站点风格确定后，前端不应该成为整个项目里瓶颈；
3.重构的需求，尽可能的让类和区块样式可重用；
4.分离结构和表现的需求，遵守了语义化结构的约定;
5.构架完全符合金融网特色的CSS框架。
6.对代码进行必要的搜索引擎优化。

第二部：关于CSS命名的一些约定：

1.不使用大写形式的类名和id名;
2.尽可能使用描述性的英文单词的组合作为类名和id名;
3.id名及类名的多个英文单词之间使用“_”短横线分隔;
4.按区域进行描述编号例：main01_div01_ul01 (可以理解为主体第一区域第一DIV下的第一个UL)

下来我们要对整个网站及设计稿进行分析，去做符合自己门户结构特色的CSS框架。我们以新浪网为例子进行站点结构分析，整个页面分为：首页，更多页，内容页，专题页，数据中心，新闻中心，频道页，广告……

我们对这些页面进行整理，去发现他们的公共部分：CSS的样式,及区域，模块的碎片。我们需要做的是把这些公有的部分提出来，我们可以把CSS分以下几类：

主体样式表：sjweb.css
font(字体样式，字号，颜色的集合)
layout(框架结构集合)
global(全局默认样式集合)
component（组成页面部分样式表，模块碎片集合）
这些讲统统的被import到sjweb.css主体样式表里，主体样式表做为一个loader加载新的外来样式，比如广告样式表。

这样这些页面只需要写一点点属于自己特殊要求的CSS样式代码就可以了。

在构建这个CSS框架的时候有很多细节的东西最好能统一化，比如：行间距，模块之间间隔距离等。

下面是某门户网的首页结构图：

规则：

1.所有area之间，模块之间，间距上下左右为：8 Pixel ;
2.新闻列表颜色#333 ;
3.新闻列表行间距20 pixel；
……等等

调整环境：IE7,ff,IE6,IE5.x,Opera。

PS：其实更多是你在构建的时候细节上的问题，好了不多说了。呵呵。

文章摘自：http://www.sjweb.cn/

随机日志

更具亲和力的文字隐藏方法

青色 — Fri, 26 Sep 2008 17:43:44 +0000

文字隐藏应用广泛，但常用的方法没有什么亲和力。

常用文字隐藏方法的缺陷：

1、display:none

这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略；

屏幕阅读器会忽略被隐藏的文字。

2、visibility: hidden

这种方法隐藏了文字却仍然占据物理空间。

更好的方法：

overflow:hidden

.class{
display:block;/*统一转化为块级元素*/
width:0;
height:0;
overflow:hidden;
}

从代码似乎就可以看出更具亲和力，因为它是自动隐藏，而不是强制隐藏。

随机日志

浏览器兼容常见问题

青色 — Thu, 11 Sep 2008 19:15:38 +0000

Web标准是大趋势，越来越的网站采用XHTML+CSS编写或重构。由于CSS有很多优点，所以我们有理由选择CSS。

然后在制作过程中，常常会出现问题。其实CSS并不难学，难的是做浏览器的兼容。如果你掌握了CSS的基本语法以及盒子模型、浮动、定位、文档流，那么你所写的CSS代码在“理想的世界”里是完全没有问题的。这个“理想的世界”指的是完全符合标准的浏览器。然后这个“理想的世界”是不存在的（至少目前可以这么说），只有接近这个“理想的世界”。

虽然现在的世界不那么理想，换回具体的对象来说吧。虽然现在的浏览器不那么符合标准（当然有些还是很不错的，如：ff、opera），但有些市场占有率很高，在未来几年之内还不会淘汰（如IE6），所以我们不能放弃。我们不能改变它，那我们就了解它、适应它，也就是我们的主题：浏览器的兼容。

下面是一些常见的问题，希望对一些人有所帮助：

1、IE6双倍外边距（IE6双倍margin）；

2、

去除点击链接时出现的虚线框

青色 — Tue, 09 Sep 2008 08:01:37 +0000

链接在被点击时会出现虚线框，即使松开了也仍然存在，在有的时候显得不美观。既然不好看，那就不要它。怎样去掉呢？

方法一 IE下可使用其私有的html属性：hideFoucs，在标签的结构中加入hidefocus="true"属性。即：

17css-青色's Blog

而在 Firfox 浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：

.HideFocus { outline:none; }

方法二 也可以使用CSS expression来控制，但不推荐使用，毕竟expression在性能上有问题。

.HideFocus {
	hide-focus:expression(this.hideFocus=true);  /* for ie 5+ */
	outline:none;  /* for firefox 1.5 + */
}

除链接外，该CSS同样适用于input和button标签。

方法三 将以下代码保存为link.htc文件：

链接样式中加入：

a { behavior:url(link.htc); }

IE中已经没有问题，但是在FF中虚线框依然存在。再增加一条样式定义来解决此问题：

a:focus { outline:0; }

这样IE、FF中虚线都不存在了。

随机日志

CSS图像替换技术之Levin的方案

青色 — Sun, 07 Sep 2008 03:01:47 +0000

以下内容摘自《CSS禅意花园》一书，略有删减。

Levin Alexander想出了一个绝妙的注意：不再将文本置放于span中，而是将其从span中移出来，将文本和span一起放在父元素中，然后使用这个空白的span覆盖文本，并将背景图像应用到span之上。如果一切顺利的话，屏幕阅读器即可正常访问这段文本，切也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题了。但新的问题也随之出现，那就是图像不能是透明的，否则用户将会看到下面的文本。切这种方案所需要的CSS代码极为冗长，让人难以理解。

HTML代码：

And a dash of Thyme.

CSS代码：

.replace{
position:relative;
margin:0;
padding:0;
}
.replace span{
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
#myh1,#myh1 span{
height:25px;
width:300px;
background:url(thyme.png);
}

优点：屏幕阅读器可正常访问；解决浏览器禁用图片后空白页面的可访问性问题。

缺点：无法使用透明图像；CSS代码较为冗长。

浏览器支持：

Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox；

苹果机——IE 5.2、Safari、FireFox。

点击这里查看其他图像替换方案。

CSS图像替换技术之Rundle的方案

青色 — Sun, 07 Sep 2008 02:44:26 +0000

以下内容摘自《CSS禅意花园》一书，略有删减。

设计师Mike Rundle提出了一中使用负text-indent属性值的方法，将文本推到屏幕的左边缘之外，代码简洁优雅。

HTML代码：

CSS代码：

#header{
text-indent:-5000px;
background:url(sample-image.gif) no-repeat;
height:25px;
}

优点：屏幕阅读器可正常访问；没有多余的；简洁优雅的CSS。

缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题。

浏览器支持：

Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox；

苹果机——IE 5.2、Safari、FireFox。

点击这里查看其他图像替换方案。

随机日志

CSS图像替换技术之Leahy和Langridge的方案

青色 — Sun, 07 Sep 2008 02:16:42 +0000

以下内容摘自《CSS禅意花园》一书，略有删减。

Seamus Leahy和Stuart Langridge均独立地发现了这种方法。该方法让我们不必再添加那些多余的标签，且在保证屏幕阅读器可以正常阅读文本的同时，也能在页面中隐藏元素中的内容。

HTML代码：

CSS代码：

#header{
padding:25px 0 0 0;
overflow:hidden;
background:url(cola.gif) no-repeat;
height:0;
}

优点：屏幕阅读器可正常访问，没有多余的。

缺点：并没有解决浏览器禁用图象后空白页面的可访问性问题。

点击这里查看其他方案。

CSS图像替换技术之Fahrner的方案

青色 — Sat, 06 Sep 2008 03:36:25 +0000

以下内容摘自《CSS禅意花园》一书。

2003年3月，Douglas Bowman在他的网站Stopdesign上发布了一个技巧（www.stopdesign.com/articles/replace_text)，让设计师能够用一张背景图像替代某元素中的文字，以期显出更美观的字体。为了表示对发明者Todd Fahrner的尊重，这个技巧随后也被叫做“Fahrner图像替换（Fahrner Image Replacement，FIR）”。该技巧实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTML标记：

css Zen Garden

我们可以使用下面的这段CSS容易地实现图像替换：

#pageHeader{
background:url(lemonfresh.gif) top left no-repeat;
width:400px;
height:20px;
}
#pageHeader span{
display:none;
}

通过使用CSS的display:none或visibility:hidden，所有在#pageHeader元素中的span元素都被隐藏起来。Hellsing同时使用了上述两种CSS设定——但它们的效果确实一致的。图像替换技术非常强大且很快开始流行——若是没有它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。

点击这里查看其他图像替换方案。

CSS图像替换技术

青色 — Sat, 06 Sep 2008 03:10:09 +0000

图像替换就是隐藏元素中的文本，用一副生动的图象替换。如果没有图像替换，那么网页就不可能这么美观、漂亮。《CSS禅意花园》中说：

图像替换技术非常强大且很快开始流行——若是没有它，我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。

由此可以见图像替换的重要。

也许你会说直接放一副图片或加上背景不行吗？为什么要写上文本有把文本隐藏呢？这不是多此一举吗？这样做确实能达到一样的视觉效果，但对搜索引擎是不利的。因为搜索引擎不能从这块地方的到任何内容，它就不知道这块地方要表达什么意思。而使用图像替换技术对搜索引擎就很友好。在引用《CSS禅意花园》中的一段：

图像替换技术使用display:none的本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中img元素，若是没有了alt属性，那么对于google等搜索引擎，以及辅助浏览设备（例如，屏幕阅读器即可阅读页面内容，并以声音的形式告诉浏览者）之类无法呈现图像的客户端来说，将变的豪无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对任何客户而言，理解页面内容都不成问题。

直接使用图像或背景是传统表格布局使用的方法，而图像替换是CSS布局使用的方法。这又一次证明了CSS布局的网站更有优点。

《CSS禅意花园》中提了4种图像替换技术的方法，现在一一摘抄下来，和没有阅读此书的朋友分享：

1、Fahrner的方案

2、Leahy和Langridge的方案

3、Rundle的方案

4、Levin的方案

符合web标准的css网站相当于已经做了30%的SEO工作

青色 — Fri, 05 Sep 2008 07:21:17 +0000

现在的网站都在向web标准进军，大到门户，小到个人博客。这是因为符合web标准的css网站优点多多，这里着重说说符合web标准的css网站对SEO的影响（下面内容转载自互联网）。

CSS DIV设计的网站是按照W3C标准的，如果一个站点完全是CSS+div制作的，那么你网站的SEO（搜索引擎优化）工作已经完成了30%！为什么会这么说？SEO其他方面在哪？好，请接着我的思路往下看：

符合web标准的css网站相当做了30%的SEO工作

1、css div网站遵循“网页结构、表现、行为分离，互不干涉抢功”理念

且不说SEO，其实按照这个理念建设起来的网站，网页打开速度会明显的加快。因为按照这个理念，网页将会分成html、css、js三种类型的文件，而css、js又是可以缓存的，所以浏览一个这样的网页其实就是下载html代码就行了，速度当然变快。

我们先看看SEO都做些什么：

a.网页META标签会添加的比较齐全，如keywords、description、robots；

b.被搜引擎抓取的内容，代码比较精简，非内容代码大大减少，文件小；

c.文本会比较靠前。几乎都在200字内就可以搜索到正文，重要内容；

d.不会出现表格那样多层嵌套的问题。

2、修饰性图片文本替换，js、flash文字图片还原

有些网站为了追求炫眼效果，采用了图片按钮，图片新闻flash切换，文本的js跑到效果……这样大大将原本属于图片，文字链接的代码变成了搜索引擎读不懂的js代码、flash，或者是直接插入原本不是内容的修饰性图片替换了文字。如果这些刚好又包含了热门关键字，那么搜索收录量将损失很大。

修饰性图片文本替换：就是说将不是内容而是修饰的图片变成底图显示，不干扰搜索引擎，让它忽略它。而有增加文字，之后使用css隐藏掉，这样也增加了可以搜索的文字。常见使用于logo，按钮，菜单。

js、flash文字图片还原：这是我近来提出来的一个思路，还没有广泛给大家知道的方法（呵呵，大家接不接受还是个问题）：将js，flash显示的内容转为html，之后使用js读取html，传递参数启动原来的效果、并且隐藏html，只是比原来增加了几个步骤。详细可以参考我写的文章：如何减少 JS对搜索的负面影响。

3、W3C要求必须添加链接标签的title、图片标签的alt属性

这样的话，所有的a标签都会规范的添加有title文本，img有alt文本。而不是等到要优化的时候临时的把几个含有关键字的链接（描文本）添加上title，图片加好alt。CSS+div不是为了SEO优化而添加title、alt，而是为了网页亲和力添加它们。

4、合理安排使用

~

，文本加粗，斜体，下划线

这是语义化标签都必须做到的一步。所以做到了CSS+div，这个问题也会在不知不觉中做到了。

5、网页标准可以随时将重要的内容调前，之后使用css重新定位。

例如页面效果图中中间的文字比较重要，可以先把重要的内容放在左边的代码的前面，方便搜索引擎，之后使用css将它调会到效果图的位置。

6、网页标准提到的好处

a、更少的代码和组件，容易维护；

b、带宽要求降低（代码更简洁），成本降低；

c、更容易被搜寻引擎搜索到；

d、改版方便，不需要变动页面内容；

e、提供打印版本而不需要复制内容；

f、提高网站易用性。

SEO的另一半工作是编辑，编程

编辑涉及的工作有：频道栏目的设计、取名，页面的布局（关键词的位置安排），创建栏目时，录稿时，文件夹，文件的取名；关键词管理，了解当前使用的关键词流行度，竞争度；专题、当前热门的关注；录稿时关键词的提炼、图片alt的插入习惯；与同类型网站的交流，交换链接……

编程涉及的工作有：页面实现静态化；URL实现伪静态，使用re_write重写技术；本站系统搜索中关键词的搜索功能，实现网站各个页面的关键词网；维护服务器，稳定服务器。评论的广告过滤；自动将关键词加粗、添加含有title关键字的链接；避免网站过多死链接，提供死链接自动删除或修复功能；相关文章取文章链接格式：先是关键词相同的关连，二关键字与标题的关连，文章内容与关键词关连。……

所以制作完成CSS+div的网页后，你只是完成了30%的SEO工作，还有另外70%需要编辑，编程共同完成。其它的作弊，或者是刻意重复关键词，body之间代码的开始或结束增加关键词出现机会。

制作、编程是SEO的“打地基”

没有好的制作，符合搜索优化的代码结构，那么无论编辑的水平怎么样，搜索引擎也不会有好效果。但也可以看到：“地基”打好以后，随着时间的增长，编辑的作用效果就会原来越明显，因为地基不需要经常变动的。一动就是伤筋骨的“大工程了”。

不符合标准的网站，赶紧网站重构吧

更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

所以说辛苦的学习SEO，还不如来一次网站重构，使用CSS+div做网站，布局好网站的xhtml、css、js，选好程序，那么剩下的工作就是编辑。SEO能否实现最好的优化，这就要看编辑的能力和水平了。

©2010 一起CSS. All Rights Reserved.
.

CSS中英文双语导航菜单

青色 — Tue, 02 Sep 2008 13:11:57 +0000

CSS中英文双语导航菜单已经不新鲜了，但下面这种方法我觉得比较有意思，思路比较特别，所以拿出来分享一下：

首先看具体代码：

XHTML代码：

Home首　页

About us关于我们

Products产品展示

Services售后服务

Contact联系我们

CSS代码：

* {
margin:0;
padding:0;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif,宋体;
margin: 1em 0 0;
list-style:none;
}
#nav li{
float: left;
margin-right: 1px;
}
#nav li a,#nav li a:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
overflow:hidden;
}
#nav li a span{
display:none;
}
#nav a:hover{
position: relative;
}
#nav a:hover span{
display:block;
position:absolute;
top: 0;
left: 0;
cursor: pointer;
padding-top:2px;
}
#nav li a:hover,#nav li a:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}

你可以点击这里查看效果。

随机日志

CSS Sprites

青色 — Thu, 28 Aug 2008 09:30:48 +0000

上次写了《图片对网站速度的测试》，只知道这样对网站的性能有提高。今天才知道，原来它有一个名字叫CSS Sprites。

CSS Sprites是什么技术呢？就是把网页要用的很多小图片合并成一个图片，从而大大的减少HTTP的连接数，使网站速度更快。

下面简单介绍一下CSS Sprites：

CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传，后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中，也是使用到CSS Sprites，几乎都有的CSS装饰图都被一个 40×2000的图包办。社交大站Facebook最近也使用了一个 22×1150的图片承担了所有icon.一时间，CSS Sprites无处不在。

优点

我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

缺点

至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

总结

性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。

想更详细的了解CSS Sprites，请点击这里。

不管你怎么想，反正我是爱上了CSS Sprites。

随机日志

CSS hack区分浏览器（IE6、IE7、FF）

青色 — Wed, 27 Aug 2008 09:15:34 +0000

由于各个浏览器（这里仅指IE6、IE7、FF）对CSS的解释并非完全相同，导致所写代码网页在各个浏览器中的效果不一样。为了使网页在各个浏览器中显示同样的效果，就需要针对不同的浏览器写不同的CSS code，这就叫CSS hack。

下面针对区分IE6、IE7、FF这三种浏览器举几个常用的简单的CSS hack：

全部浏览器都识别：

h2{
color:#f00;
}

IE系列识别：

h2{
+color:#0f0;
}

仅IE6识别：

h2{
_color:#00f;
}

区分IE6、IE7、FF

h2{
color:#f00;/*所有浏览器识别*/
+color:#0f0;/*IE浏览器识别*/
_colro:#00f;/*仅IE6识别*/
}

所以，h2在FF、IE7、IE6这三个浏览器中的解释为：

FF：#f00

IE7：#0f0

IE6：#00f

要注意书写顺序，不然可不是这样子哦。

当然，我不太赞成用这种通不过验证的CSS hack，本人就极少用。但实在没办法的时候拿来用用还是可以的。

随机日志

如何在IE6里定义高度小于18px的盒子

青色 — Fri, 22 Aug 2008 08:34:47 +0000

你遇到过定义一个较小高度（比如height:5px）的盒子在IE6里却显示不止这个高度的情况吗？

看下面的代码:

HTML代码：

CSS代码：

*{
margin:0;
padding:0;
}
#box{
width:400px;
margin:5px;
overflow:hidden;
}
#left{
width:200px;
float:left;
background:#00f;
}
#right{
width:200px;
float:right;
background:#FF0000;
}

在4个浏览器中的效果图点击这里查看。

我们并没有给盒子定义高度，但IE6和IE7里却出现了高度，FF和opera正常。

给#left盒子加上height:5px后，效果图点击这里查看。

IE6没有变化，IE7#left盒子有了指定的高度，但#right还是有一个高度，FF和opera仍然正常。

再给#right盒子加上height:10px，效果图点击这里查看。

IE6依据没有变化。IE7正常了，FF和opera仍然正常。

IE7、FF和opera正常了，先把他们抛开，不理他们了，现在只看IE6，为什么IE6里的盒子明确定义了高度，它却不按指定的高度显示呢？它为什么始终显示那个高度？那个高度是多少呢？

我们增加#right盒子的高度，增加1px，也就是增加到11px，仍然没有变化，增加到12px、13px……直到增加到19px，终于有变化了，效果图点击这里查看。

由此可以断定那个高度是18px，也就是说在IE6里无法定义小于18px的高度（即使是0）；而IE7没有给盒子定义高度的话，也会有18px的高度。

什么原因呢？这是由于IE默认字体大小造成的。

解决的方法：

一、给盒子定义font-size:0属性；

二、给盒子定义overflow:hidden属性。

这样，在IE6、IE7、FF和opera里的效果就一样了。

让IE6也有最大高度max-height的效果

青色 — Thu, 21 Aug 2008 08:10:47 +0000

上次写了《让IE6也有最小高度min-height的效果》，现在来写《让IE6也有最大高度man-height的效果》。具体代码如下：

height:auto !important; height:500px; max-height:500px; overflow:hidden;

解释：

1、IE6不识别max-height:500px和height:auto !important这两句，超过500px（也就是我们所希望的最大高度）后的内容将自动以藏；

2、IE7及其他标准浏览器全部识别，所以有期望的效果。

但仍然存在一个问题：在没有任何内容的时候，IE6里还是会有500px的高度。因为IE6对!important的解释存在bug（你可以点击这里查看），这时IE6只认height:500px，而不认height:auto !important，所以在IE6里自然就出现500px的高度。

最大高度max-height应用相对较少，因为有可能会出现某些我们没有考虑到的因素而使内容超高了这个最大高度max-height，那么就可能会使页面不美观。自己看这用不用吧！

纯CSSTab面板/选项卡

青色 — Sat, 16 Aug 2008 06:21:08 +0000

Tab面板好象最早出现在网易吧。Tab面板由于能节省很多网页空间、给用户较好的体验，受到很大家的喜爱，所以很快流行起来了。

Tab面板一般都是利用javascript制作的，也应该由javascript制作。现在我们突破常规，用纯CSS来制作一个Tab面板，你可以先点击这里查看效果，怎么样？点击3个链接，有不同的内容切换吧。看看具体的代码：

CSS代码：

*{
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
#container{
width:300px;
margin:10px auto;
position:relative;
border:1px solid #666;
}
ul{
width:20px;
height:100px;
position:absolute;
right:5px;
top:100px;
}
ul li{
height:33px;
}
ul li a{
display:block;
width:20px;
height:20px;
line-height:20px;
text-align:center;
color:#000;
background:#ccc;
text-decoration:none;
}
ul li a:hover{
color:#fff;
background:#666;
}
#wrapper{
height:300px;
overflow:hidden;
}
#a1,#a2,#a3{
width:300px;
height:300px;
}

XHTML代码：

看了代码之后你明白了其中的原理吗？明白了当然最好，没明白也没关系，继续看。

其实原理就是：固定外面容器#wrapper的大小。给里面的每个子盒子（div）设置一个瞄点（瞄点刚好又是id），最后让链接分别制向这些瞄点。当我们点击链接“2”的时候，这个链接指向瞄点#a2，那么瞄点#a2所在的盒子的顶部就到了容器#wrapper的顶部，它把#a1挤上去了，#a3也还在下面，又由于容器#wrapper有overflow:hidden属性，所以#a1和#a3都不显示。说白了就是3个div在容器#wrapper里上下抽动。

当然这个方法也有不足的地方，比如只能是点击切换，而且要注意容器和子盒子的范围。

这方法来自蓝色理想，并不是我想出来的，很佩服作者能想出这种办法。

随机日志

IE和FF下的margin-top

青色 — Thu, 14 Aug 2008 00:39:57 +0000

由于垂直 margin 会出现叠加的现象，（如果你还不太了解垂直 margin 叠加的原理，请查看margin叠加原理）所以有些情况下 margin-top 在 IE 和 FF 会出现不同的现象。如下面的代码：

* { margin:0; padding:0;}
#box { width:500px; height:400px; margin:0 auto; background:#ccc;}
#son { width:500px; height:300px; margin-top:20px; background:#f00;}

查看Demo

在 IE 里，出现我们希望的效果，而在 FF 里，却没有。子盒子 #son 没有出现 margin-top:20px 的效果，反而父盒子 #box 出现了 margin-top:20px 的效果，也就是我们给子盒子设的 margin-top:20px 属性出现在父盒子里了。

怎么解决呢？最好的办法是用父盒子的 padding-top 代替子盒子的 margin-top，详细代码如下：

* { margin:0; padding:0;}
#box { width:500px; height:400px; margin:0 auto; padding-top:20px; background:#ccc;}
#son { width:500px; height:300px; background:#f00;}

查看Demo

还有其他方法，但和上面的比较更麻烦，就不介绍了。。。

=======华丽的分割线=========================================

读者“vampire”在评论中说为父元素设置 overflow 属性也可以解决此问题。经测试，为父元素设置 overflow 属性，值为 hidden 或 auto 都能解决此问题，而且这种方法似乎更容易理解，更符合本意。感谢“vampire”的评论。

随机日志

有序列表项在IE里全部显示“1”的奇怪现象

青色 — Wed, 13 Aug 2008 00:22:28 +0000

前段时间有个网友发个文件给我，问我什么他的有序列表项在IE里全部都显示“1”，当时我也觉得很奇怪，因为之前我也没有遇到过这种情况。现在我们来看看为什么会出现这样的奇怪现象。

先看下面的代码

测试文字测试文字

测试文字测试文字

测试文字测试文字

测试文字测试文字

测试文字测试文字

测试文字测试文字

*{
margin:0;
padding:0;
font-size:12px;
}
ol{
padding-left:30px;
}
ol li{
height:20px;
}

你认为列表项会按1、2、3……显示吗？点击这里查看效果。哈哈，没有吧，全部都显示“1”（注意用IE浏览器）。为什么呢？是li属性height:20px导致的。本来给元素加上高度是很正常的，但在IE里却产生这样的bug，确实让人很郁闷。

不过现在比较少人用默认的列表项目符号，一般都用漂亮的背景图片代替。如果你要用有序列表的默认项目列表符号，又希望列表项之间有间隔的话，为了避免这种情况，那就用line-height或padding代替height吧。

随机日志

三种有效的清除浮动的方法

青色 — Tue, 12 Aug 2008 05:34:32 +0000

浮动是CSS布局中最常用的属性，然而浮动是脱离标准流（也称文档流）的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离标准流这一特性，使浮动成为CSS布局的难点之一。

清除浮动有好一些方法，但兼容各种浏览器的方法却不多。下面我就介绍三个比较有效的兼容的方法，这三个方法也见证了我用CSS布局的几个阶段吧。这三个方法中的某种方法可能你也在用，如果你对那种方法很熟悉了可以直接54。

我们以下面的XHTML代码为例来说明这三种方法的用法：

1、额外标签法

这是我一开始使用的方法。这种方法是在浮动元素的最后加一个标签，用这个标签清除浮动，一般是加div：

，当然也可以是其他标签，比如p、br等。本例加在

的后面。对应的CSS代码：

#box{
width:500px;
margin:10px auto;
background:#ccc;
}
#sidebar{
width:190px;
height:500px;
float:left;
background:#f00;
}
#main{
width:300px;
height:500px;
float:right;
background:#00f;
}
.clear{
clear:both;
}

点击这查看效果

.clear有必要的时候可以这么写：

.clear{
clear:both;
height:0;
line-height:0;
font-size:0;
}

因为在IE6下，会出现没有内容的div仍有一定的高度情况（大概是12px吧，具体不太清楚，没有具体研究）。

我给每个盒子都加了背景颜色，这样能清楚的看到各个盒子的范围和#box是否包含了#sidebar和#main。

优点：直接，W3C推荐。

缺点：添加了无语意的标签，破坏了XHTML代码的良好结构，对搜索引擎也无用。如果不看效果图的话，可能不知道要把这个额外标签加到什么地方（当然这种情况比较少，现在一般都先画出原，而且也可以根据命名来判断），如果以后要改版，处理这些额外的标签会是一个麻烦。

有一篇文章《br玩转清除浮动》，性质和这种方法是一样的，有兴趣的可以搜索一下。

2、父元素浮动法

了解到第一种方法有比较多缺点之后，我选择了这种方法。

这种方法就是把浮动元素的父元素也设浮动属性。比如上面的#box也设浮动float:left，float:right也可以，具体的代码是：

#box{
width:500px;
margin:10px auto;
float:left;
background:#ccc;
}
#sidebar{
width:190px;
height:500px;
float:left;
background:#f00;
}
#main{
width:300px;
height:500px;
float:right;
background:#00f;
}

点击这里查看效果

查看效果发现没有居中，是的，#box已经向左浮动了。我们改写一下#box的CSS代码，让他能够居中：

#box{
width:500px;
margin:10px auto;
float:left;
position:relative;
left:50%;
margin-left:-250px;
background:#ccc;
}

点击这里查看效果

现在居中了。

优点：无需添加无语意标签。

缺点：需要给父元定义宽度，浮动元素太多，控制不好很麻烦。。。

3、overflow:hidden法

这种方法是前段时间偶然在网上发现的，我目前正在使用次方法。这种方法是给父元素加overflow:hidden属性，为了兼容IE6，这个父元素也要加上合适的宽度。但由于不再是浮动，所以不会对周围的元素产生影响。对应上面XHTML代码的CSS代码是：

#box{
width:500px;
margin:10 auto;
overflow:hidden;
background:#ccc;
}
#sidebar{
width:190px;
height:500px;
float:left;
background:#f00;
}
#main{
width:300px;
height:500px;
float:right;
background:#00f;
}

点击这里查看效果

查看效果也没有居中，我们还是用改写一下#box，点击这里查看改写后的效果。

优点：容易控制。

缺点：等待发现。。。

这三种方法都是有效果的，选择自己喜欢的擅长的吧。。。

补充1：还有一种after伪类清除法，也比较有效，但代码较多，理解有难度，且IE6不支持after伪类，要针对IE6写CSS hack。本人没有用过此方法，所以不敢多说，有兴趣的自己搜索吧。。。

一起CSS » CSS

“导”字导致样式失效

相关日志

说说CSS Hack和向后兼容

一、CSS 选择器 Hack

二、CSS 属性 Hack

三、IE 注释

四、浏览器探测：JS/后端程序判断

五、个人推荐写法

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

相关日志

css hack

相关日志

用js模拟css属性选择器

随机日志

CSS Expressions有多可怕

随机日志

HTML4和浏览器默认样式

HTML样式

浏览器默认样式

随机日志

margin叠加原理

随机日志

超过宽度显示省略号（无js全兼容）

随机日志

百度有啊CSS圆角方案

相关日志

真正的CSS等高布局

随机日志

我看超过部分自动隐藏或显示省略号

随机日志

IE 8 beta 2不识滤镜alpha ？

随机日志

CSS制作仿image menu效果

随机日志

别说IE6不认识!important

相关日志

CSS3圆角属性和浏览器私有圆角属性

相关日志

用CSS滤镜制作圆角

CSS滤镜制作圆角

相关日志

hoverbox

随机日志

一张图片实现圆角

一张图片实现圆角

相关日志

上下两张图片CSS圆角

有图CSS圆角

相关日志

3D效果CSS圆角

3D效果CSS圆角

相关日志

流行的CSS圆角

相关日志

用js让“footer”处于底部

相关日志

使用CSS定位页面的“footer”

Content

Footer

随机日志

ie img 3px bug

相关日志

用CSS制作彩色文字

随机日志

制作半透明效果

相关日志

纯css下拉菜单详解

相关日志

IE条件注释续

随机日志

css2高级选择器

这是标题

相关日志

再谈overflow清除浮动

随机日志

:hover伪类在IE6中的BUG

相关日志

门户网站与大型网站的CSS架构与组织

随机日志