标签滑动门技术

因为最近比较忙，所以好久没有上来写文章了。最近有很多朋友问我，能否让标签的背景图片自适应文字的宽度。答案是肯定的，这涉及一个滑动门技术，下面我会以实例向各位朋友介绍这种技术。

目前比较流行的就是两边是圆角，中间是文字的标签。如图：

使文本保持在同一行中显示

最近有很多网友都在问一个问题：怎么能让多个不固定宽度的对象显示在一行上，如果有对象在剩余空间中显示不下，则换到下一行显示，而不是一个对象分两行显示。

的确，这是令初学者经常困惑的问题，也是经常在设计中用到设置。类似网站模板右侧的标签列表的应用。

下面请看这样一个例子：

max|min-width|height的兼容性测试及设置

昨天在“CSS森林”技术交流群中与朋友们讨论了对象的最大和最小宽高（即max/min-width/height）在各浏览器下兼容的问题。在讨论到此属性是否适用于IE6下的时候持有分歧。下面我举3个例子来说明一下问题。

一、max / min-width / height属性在IE6下无效

目前，这也是我多年工作以来遇到的第一个，在其他浏览器下有效而IE6下无效，并且没有其他属性可以弥补此功能的问题。在以往的工作中体会到，微软总是在做兼容的同时又不失时机的开发出只有IE才可以支持的属性。而相对于max/min-width/height这样方便的属性而言，使我很不理解的是，微软为什么对此弃而不用。

IE6下图片下边有空隙的解决办法

IE6下面究竟有多少个BUG恐怕没人会知道了。我也只能发现一个，解决一个，争取可以使大家少走些弯路。

IE6下图片下边有空隙的解决方法网上已经有很多种解决办法了，我今天同大家一起复习一下那些办法，并提供一些新的方法供大家参考。

下面请先看一下出现问题的代码：

常用标签的使用位置

在刚接触XHTML+CSS设计网页时，对于标签的使用没什么经验，也很随意，经常是想起什么就用什么，认为只要能实现效果就可以。但随着学习的深入和对搜索引擎优化知识的了解，发现其实标签的使用也是一门学问。

在这里不对各标签在CSS中对应的属性及用法做详细的介绍，重点介绍在网页中的应用，希望能对大家有些帮助。

一、DIV

DIV高度不能自适应

当DIV中是一段文字时一切正常，如果DIV中又包含了设置了浮动属性子DIV时就有可能出现这样的问题。

这种问题在FireFox和IE7中比较常见。在IE6中，就算设置了高度，当内容或子对象超过了范围时，DIV的高度也可以自动增加以适应内容（除非设置了overflow属性限制大小）。但在FireFox和IE7下就不会有这种情况。下面以FireFox来举例说明出现情况的原因及解决办法。

先看这样一个例子：

注释在IE下造成文字溢出

很多人都会有在制作网页的时候写注释的习惯。应该说是个好习惯，不仅使自己的思路清晰，极大地减轻了维护的难度，也为其他人的阅读提供了方便。但就是这样的好习惯，有时也会为我们带来一想不到的麻烦，如典型的3px问题。

各浏览器都无一例外的在遇到注释文字时都会忽略，但在IE下还是给我们增添了不小的麻烦。当子对象设置了浮动属性，且宽度等于父对象的宽度，此时在IE下就会出现问题。

请看下面的代码：

文字垂直居中

CSS中怎样设置才能使对象中的文字垂直居中于对象，这个问题也是捆扰很多朋友的难题。现在网上的很多代码都做不到浏览器兼容。我把网上有关的方法整理了一下，做了些改动，完全可以兼容各主流浏览器。

下面具体说一下在不同情况下垂直居中的方法。

一、一行文字垂直居中

IE双倍边距BUG的现象及解决办法

最近有很多人问我：在IE6下设置了几个标签的float和margin属性，但左边距明明设的是5px，怎么出来后就变成了10px，而在FireFox下就，没问题。在解释了这是典型的IE6的双倍边距BUG的现象之一后，并帮助那位朋友解决了问题。

其实，IE6的双倍边距BUG也常常是捆扰初学者的一个难题。下面我总结一下此BUG的现象和解决办法。

第一种，也是最常见的一种就是上面说到的，设置了浮动（float）后再设置外边距（margin），外边距就会是原来值的2倍。请看下面的代码：

W3C网站模板？

最近去各模板素材类网站找资料的时候，发现越来越多的网站上都出现了一个新的名词：W3C网站模板，并把它当做一个分类来展示用XHTML+CSS制作的成品页面。这本无可非议，但“W3C模板”这个名词还是让我有很大的疑惑的。

我们都知道，W3C的中文名字万维网联盟，是一个根据互联网的发展及应用，制定出国际统一标准的非赢利性组织。Web标准是他们制定的在网站设计及应用当中，一个统一的，用于Web表现层的技术标准，使不同浏览器都具有相同显示效果的标准之一。除此之外还有很多的相关标准。

我不知道是谁，什么时候提出了“W3C网站”和“W3C网站模板”这样的概念，可见这样的定义已经完全混淆了W3C与Web标准的概念。以至于发展到现在，很多人在片面夸大CSS的作用，却忽视了一个形成Web标准网站最基本的因素——页面的布局结构。