Pivot Code » CSS

CSS结合单图定位制作的一个漂亮的投票应用

Vidar Liu — Fri, 12 Mar 2010 07:49:05 +0000

这个投票代码是我在很早以前做项目时完成的，今天在新的工作中又用到了投票功能，于是我就把上个项目做的东西拿出来做了简单的优化，以便让这个代码更好的扩展和移植。

投票功能在实际应用中的关键在于：需要用百分比控制显示条的长度，之所以使用百分比是用来配合程序分配相应的值来实现投票比率均分的显示效果。

在这个应用里，为了更好的利用图像表现进度条的显示，用到了很多标签，然后对标签进行排列控制长度得到了最终的效果.

DEMO:

以下是CSS代码：

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0}
.voteInfo{
	width:550px;
	padding-top:10px;
	float:left;
}
.voteInfo span{
	display:block;
	color:#999;
	height:20px;
	line-height:20px;
}
.voteInfo span em{float:right; color:#F00;}
.voteInfo h1{
	font-size:16px;
	height:30px;
	line-height:30px;
	color:#005FAB;
	font-weight:bold;
	text-align:center;
	margin-top:20px;}
.voteInfo ul{
	width:486px;
	list-style:none;
	margin:0 auto
}
.voteInfo ul p{
	font-size:12px;
	color:#999;
	line-height:18px;
}
.voteInfo ul li{
	height:20px;
	line-height:20px;
	margin:0 auto;
	margin-top:10px;
}
.voteInfo ul li span{
	display:block;
	float:left
}
.voteInfo ul li span.voteClassName{width:140px;padding-right:10px;text-align:right}
.voteInfo ul li span.voteDataLength{width:186px;}
.voteInfo ul li span.voteDataLength em{
	width:186px;
	height:20px;
	background:#ccc}
 
.voteInfo ul li span.voteDataLength em b{
	display:block;
	height:20px;
	float:left;
}
.voteInfo ul li span.voteDataLength em i{
	width:2px;
	height:20px;
	float:left;}
.voteInfo ul li span.voteDataLength em h6{width:184px; height:20px; display:block; float:right;}
.voteInfo ul li span.voteDataLength em i.vote1{background:url(../img/poll.gif) left top;}
.voteInfo ul li span.voteDataLength em i.vote2{background:url(../img/poll.gif) left -20px;}
.voteInfo ul li span.voteDataLength em i.vote3{background:url(../img/poll.gif) left -40px;}
.voteInfo ul li span.voteDataLength em i.vote4{background:url(../img/poll.gif) left -60px;}
.voteInfo ul li span.voteDataLength em i.vote5{background:url(../img/poll.gif) left -80px;}
.voteInfo ul li span.voteDataLength em i.vote6{background:url(../img/poll.gif) left -100px;}
.voteInfo ul li span.voteDataLength em i.vote7{background:url(../img/poll.gif) left -120px;}
.voteInfo ul li span.voteDataLength em i.vote8{background:url(../img/poll.gif) left -140px;}
.voteInfo ul li span.voteDataLength em i.vote9{background:url(../img/poll.gif) left -160px;}
.voteInfo ul li span.voteDataLength em i.vote10{background:url(../img/poll.gif) left -180px;}
.voteInfo ul li span.voteDataLength em b.votebg1{background:url(../img/poll.gif) right top; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg2{background:url(../img/poll.gif) right -20px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg3{background:url(../img/poll.gif) right -40px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg4{background:url(../img/poll.gif) right -60px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg5{background:url(../img/poll.gif) right -80px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg6{background:url(../img/poll.gif) right -100px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg7{background:url(../img/poll.gif) right -120px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg8{background:url(../img/poll.gif) right -140px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg9{background:url(../img/poll.gif) right -160px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg10{background:url(../img/poll.gif) right -180px; float:left;}
.voteInfo ul li span.voteNumber{width:140px;padding-left:10px;}
.voteInfo ul li span.voteRedio{width:30px;}
.voteInfo ul li span.voteSubmitBtm{width:60px;}

以下是html代码：

需要注意的是，进度条的长度一定要用百分比的内联样式，这样才能方便程序对这个数值动态控制

至此，所有代码都在这里了，由于为了更好的表现因此代码嵌套的比较多也比较复杂，因此如果不特别追求效果的话，可以直接用背景色代替，进而获得更精简的代码。

CSS3兼容代码生成器——css-please

Vidar Liu — Wed, 10 Mar 2010 04:51:04 +0000

CSS3和HTML5是web技术发展以来的又一次革命，然而如今的浏览器都不能完全的支持CSS3，有些浏览器则是通过自己的特有属性来支持部分CSS3的属性。更可气的是，占有浏览器最多份额的IE对CSS3的支持更是捉襟见肘，不过好在微软官方提供了一些特有滤镜来填补这些技术空白，然而这些特有属性对于我们前段开发人员来说不便于记忆，于是我们就需要用到这个网站来帮我们生成跨浏览器的CSS3属性了。

CSS Please是一个在线生成跨浏览器的CSS3代码生成器，通过它可以生成已支持CSS3属性的浏览器兼容性代码。

以下是我整理的中文翻译版本：

地址：http://www.pivotcode.com/demo/css3compatibility/css3compatibility.html
示例：

这是英文原版地址：http://css3please.com

此程序参考源来自《前段观察》：http://www.qianduan.net/css3-please.html

CSS重构（CSS Reset）

Vidar Liu — Tue, 09 Mar 2010 04:46:53 +0000

顾名思义，css重构就是重设浏览器的表现样式。为什么要重构呢？因为浏览器样式在不同的浏览器渲染下的默认显示各有不同，为了我们在开发中能够让项目在所有浏览器下的显示效果是一样的，所以在开发之前我们要按照自己习惯的方式来重构CSS代码。

那么我们需要怎样的习惯呢？这个还是要靠自己在项目中积累了。以前我在初学时也是复制别人的CSS Reset代码，然后再进行自己的项目，可是有的时候我发现有些没必要重构的样式在之前重构掉了，在单独到一个样式定义时，我还需要给他重新写上，而且，在不同的项目下的重构样式也会各不相同，例如一个图片网站和一个博客网站。因此，我往往都是简单的重构一些必须的样式，后期用到需要重构的额外再写，因此我的习惯就是随用随加。

今天在博客园里看到了一篇文章中的十个重构的例子。接下来就是剽窃的内容了：

一、Generic Reset CSS

* {
padding: 0;
margin: 0;
border: 0;
}

这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。

二、Ateneu Popular CSS 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, 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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

三、Chris Poteet’s Reset CSS

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

四、Yahoo’s CSS Reset

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

五、Eric Meyer Reset CSS

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

六、Tantek Celik Reset CSS

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

七、Christian Montoya Reset CSS

html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}

八、Rudeworks Reset CSS

* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size: 100%;
font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

九、Anieto2K Reset CSS

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, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

十、CSSLab CSS 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, 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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

以上方法大同小异，需求不同因而方法不同，一个好的重构代码是即能达到自己想使用的效果，又能提高自己的效率，更能节省不必要浪费的资源，还可以节省不必要浪费的代码，这才是重构最终要实现的目的。

部分代码转自：博客园 – 基于B/S模式的设计与开发

CSS五个常见却不常用的属性

Vidar Liu — Mon, 08 Mar 2010 02:42:50 +0000

这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉，但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性，我指的是旧的 CSS2 中的属性，如：clip，min-height，white-space，curosr 和 display 等一些被所有浏览器广泛支持的属性。因此，千万不要错过这篇文章，因为你可能发现它们竟有如此之大的用途。

1、CSS Clip

剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其 position 属性为 absolute，然后指定相对于元素的 top，right，bottom，left 值。

图片剪辑实例

以下示例演示了如何使用 clip 属性掩盖一张图片。首先，指定

元素为 position:relative，然后指定元素为 position:absolute，并且根据实际需要设定 rect 值。

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

图像调整尺寸和剪辑

在这个示例中，我将展示如何调整图像尺寸和剪辑图片。素材图片是矩形的，我想将其削减至 50％的尺寸，用来创建一个正方形格式的缩略图。因此，我用宽度和高度属性来调整图像，并使用 clip 剪辑属性予以掩盖。然后用 left 属性将图片移开左侧 15px 的距离。

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

2、Min-height

min-height 属性允许你指定元素的最小高度，适用于需要平衡布局的情况。以确保内容区域高于侧边栏。

.with_minheight {
  min-height: 550px;
}

IE6 的 Min-height hack

注：神奇的 IE6 原生不支持 min-height 属性，不过幸好有一个min-height hack。

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3、White-space

white-space 属性指定了元素中空白的处理方式。比如，指定 white-space:nowrap 会阻止文本自动换行。

em {
  white-space: nowrap;
}

4、Cursor

如果你改变了按钮的行为，其指针也应该随之改变。比如，当一个按钮不可用时，指针应该改变为默认的箭头，来表明它不可点击。因此，cursor 属性在开发 Web 应用程序时相当有用。

.disabled {
  cursor: default;
}
 
.busy {
  cursor: wait;
}
 
.clickable:hover {
  cursor: pointer;
}

5、Display inline / block

如果你不知道：块级元素是作为独立的一行来渲染的，而行内元素是在同一行被渲染的。

，

和

标签都是块级元素，，， 都是行内元素。通过 display:inline 或 block 的方式，你可以重设这些元素的 display 样式。

.block em { display: block; } .inline h4, .inline p { display: inline; }

英文原稿：5 Simple, But Useful CSS Properties | WebDesignWall
翻译整理：5 个简单实用的 CSS 属性 | 芒果

相关日志
也谈IE6下block元素float多出文字BUG
CSS结合单图定位制作的一个漂亮的投票应用
CSS3兼容代码生成器——css-please
CSS重构（CSS Reset）
常用正则表达式速查

css命名规则

Vidar Liu — Mon, 22 Feb 2010 03:04:39 +0000

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态态：status
投票：vote
合作伙伴：partner

注释的写法

/* Footer */
内容区
/* End Footer */

id的命名
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

id的命名

页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

导航

导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

class的命名

(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项

1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

相关日志
HTML5初探——个人HTML5简历
CSS结合单图定位制作的一个漂亮的投票应用
CSS3兼容代码生成器——css-please
CSS重构（CSS Reset）
CSS五个常见却不常用的属性

css文字阴影

Vidar Liu — Sun, 07 Feb 2010 02:47:34 +0000

CSS Attribute ：text-shadow

近期在自己的项目中用到了这个属性，以前经常见到在精彩网页设计中以文字搭配阴影呈现的立体文字效果彰明较著，自己也曾有过跃跃欲试的冲动，后来在网上查了下它的兼容性，结果对IE所有版本浏览器都不兼容，由于IE浏览器的市场份额还是占多数，因此对于这个属性只是简单了解，没有深入研究并使用。

而现在，在项目中需要用到这个属性，那么就不得不为此细究一下了。
text-shadow属性在Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5下被支持，对于IE只能期盼下一个版本了（对于IE浏览器的阴影效果微软提供了官方的解决方案，请继续往下看）。
此属性基本写法：

text-shadow:[颜色 x轴 y轴模糊半径]

x,y轴控制阴影的偏移位置
颜色代表阴影的颜色
模糊半径可以控制阴影的模糊与不模糊

另外某些浏览器支持多层阴影，而对于多层阴影的表现方式是用逗号隔开在加一组属性，例如：

text-shadow:[颜色 x轴 y轴模糊半径],[颜色 x轴 y轴模糊半径]

(注：safari4.0后才支持多层阴影)

示例：

text-shadow:black 2px 2px 0

DEMO

那么IE浏览器该怎么办呢？毕竟多数人还在使用IE。

IE浏览器对于好多css的新特性支持都不是很好，尤其是IE6（警告大家IE6不要再用了，否则你的电脑会成为病毒的温床）那么有个什么好的方案解决IE对于这个属性的兼容性问题呢？尤其是IE6！

对于这个疑问，微软提出了官方的解决方案——利用shadow滤镜来实现：

filter: dropshadow(OffX=1, OffY=1, Color='#f5f5f5', Positive='true')

OffX对应text-shadow属性的X轴
OffY对应text-shadow属性的y轴
Color对应text-shadow属性的颜色
Positive设置为true就可以了

欲了解更多关于IE的这个滤镜，请查看官网介绍： Dropshadow

ok，现在可以放心的使用文字阴影来实现你想要的效果了。

相关日志
也谈IE6下block元素float多出文字BUG
CSS结合单图定位制作的一个漂亮的投票应用
CSS3兼容代码生成器——css-please
CSS重构（CSS Reset）
CSS五个常见却不常用的属性

也谈IE6下block元素float多出文字BUG

Vidar Liu — Tue, 01 Dec 2009 06:28:17 +0000

最近做的一个项目经常会用到块级元素（block）浮动定位（float）的方式做的一个类似于BBS文章列表多行多列的布局方案。

我大概看了一下网上对于此种布局的布局办法，发现大多都是用表格来做的。连豆瓣、discuz的论坛也都是表格布局。

但是我对表格的布局有种敬而远之的畏惧感，一个是它的代码量很大，虽然用DW里添加表格的工具很快的添加，但是对于它的自适应元素的问题，我始终难以控制的行云流水。因此，我还是决定用css来做。

我选择用ul元素做列表框架，li元素做列表行，span元素做各列的容器的布局方式实现。

【css部分】

@charset "utf-8"; /* CSS Document */ ul li{margin:0; padding:0; list-style:none; font-size:12px; color:#333}/*初始化ul,li元素，让我们更方便使用*/ ul li{width:800px; height:35px; line-height:35px; border-bottom:1px dashed #ccc}/*定义高35像素的li元素，宽是布局的宽，还定义了一个虚线的下边框*/ ul li span{display:block; float:left; height:35px; line-height:35px;}/*定义span元素为块级元素，左浮动，高为li元素的高*/ /*分别定义需要的列span元素的宽度*/ ul li span.listOne{width:300px;} ul li span.listTwo{width:200px;} ul li span.listThr{width:100px;} ul li span.listFou{width:100px;} ul li span.listFiv{width:100px;}

【html部分】

帖子列表帖子分类发布者最后回复发布时间

这里是帖子标题这里是帖子分类发布者姓名回复者姓名 2009-10-10 20：10

这样，如果在IE6+浏览器看的话，会是预想的两行5列的效果，没有任何问题。但是，如果在IE6下看，右侧会多出最后一列中的末字到下一行，如图所示

代码是没有任何问题的，因为在其他浏览器没有任何问题。所以那肯定是IE6的问题。

以前没有用过此种布局，因此并没有过处理此问题的经验。后来去往上搜了一下，往上大多都是出自同门师傅的答案，内容如下：

“1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决”

另外有一篇很详细的解说，但是他是通过宽度的调整解决的我没有尝试，有兴趣的可以试一下，奉上地址如下：
《IE6/IE7文字溢出bug原因及解决办法》http://www.yarak.net.cn/default.asp?id=82
后来问了一下同事，他对此问题有过相应经验，不过他所知道的答案也是网上流传的方式。但是我的代码里并没有注释和以上类似的任何条件。
后经尝试，得出以下方案：
1、在span的父元素上定义溢出隐藏overflow：hidden;可以解决此问题。
2、span元素在html中书写时不进行换行（块级元素的特性）
3、span元素去掉浮动（float）并把显示方式改成display：inline-block
如此，溢出BUG问题解决

相关日志
IE6下图像的最大宽度
CSS五个常见却不常用的属性
IE6固定定位position属性fixed BUG
css文字阴影
CSS结合单图定位制作的一个漂亮的投票应用

CSS网页布局中易犯的10个小错误

Vidar Liu — Fri, 13 Nov 2009 03:27:32 +0000

即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。

1. 检查HTML元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 用删除法确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

6. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。

8. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD？

如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。

注: 本文来源于网络，出处不明。

相关日志
CSS结合单图定位制作的一个漂亮的投票应用
CSS3兼容代码生成器——css-please
CSS重构（CSS Reset）
CSS五个常见却不常用的属性
css命名规则