有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

大家首先来看一个DEMO：

HTML Markup

我们写CSS的在写CSS总会碰到一些这样那样的问题，为了应付这些问题，我们需要一些特殊的技巧才能解决。今天这篇文章我收集了几个怪异的问题，放上来给大家分享，希望大家以后碰到这样的问题能得心应手的解决。

Select最佳设置

昨天在携程UED中看到一篇关于表单元素中的Select的设置的文章，写的很有意思，详细的不多说，截了里面的一张图来说明Select的在各浏览器的测试情况：

最终得到select的最佳设置的值：

前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单，方便大家急用时有地方可查。别的不多说了，直接看代码。

为了节省时间，下面图形都采用的一个标签，可以是块元素也可以是行内元素，不过行内元素需要加上“display:block;”，唯一不同的是，在此用了不同的类名来区别，相关类名我放在了标题的后面，以便大家对应查看。

1、正方形（square）：

CSS Code:

		.square {
			width: 100px;
			height:100px;
			background: #E5C3B2;
		}
	

上面的方法是，设置宽度和高度一致就可以实现正方形的效果，下面展示一种boder制作正方形的效果：

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象（有的地方称作为“信息状态块”）的制作。那么今天老话重谈，主要使用不同的几种结构来制作这个媒体对象效果：

我们把上图拆分细化一下，可以划成下图的样子：

根据上图我们就可以轻松的写出需要的HTML结构。

HTML Markup:

网页的字体的使用，大家都清楚，有时一些特殊字体只能使用图片来代替，因为担心用户的浏览器不具有这样的字体无法正常渲染页面的效果。为了解决这个问题，前面本站推出CSS3的@font-face来实现一些特殊字体的效果。效果是作出来了，但性能大家又说，加载文件太大，直接影响了网站的性能。说真的真是鱼和熊掌不能兼得呀，而且@font-face对于中文字体来说还是蛮麻烦的。那么是不是除了@font-face就别无他法了呢？不是的，现在Google Font Api也能实现。今天学习了一下觉得蛮实用的，也是相当的方便。整理了一下放上来与大家一起分享。

目标

目标很明确，需要使用下面的字体来渲染网页的字体效果：

记得以前读书时有一个黄金分隔线，今天在网站上看到一些有关于这个黄金比例在Web设计中的应用，觉得很有意思，于是在GG中寻找了这方面的相关资料学习了一回。个人觉得有必要了解一下，如果你对这个也感兴趣的话，不仿跟着我一起往下阅读。

CSS的positon，我想做为一个Web制作者来说都有碰到过，但至于对其是否真正的了解呢？那我就不也说了，至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用，觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。

在图解这十个过程之前，我将实例的代码放上来，好让大家一个实体参考：

HTML Markup

outline的使用，大家都喜欢在reset样式表中直接重置：

    * {
      outline: none;
    }
  

Eric Meyers在他的CSS Reset是这样重置的：

昨天在《表单button的行高问题》一文中简单的描述了一下表单中的“button”（包括input[type="submit"]/input[type="reset"]/button）行高在Firefox和Opera中不以按设置值解析。今天我想和大家一起来说表单中“button”的“text-indent”属性在IE中的bug。

首先我们来看一个实例：

HTML Markup

    <input type=”submit” value=”Submit” id=”btn” />
  

CSS Code

昨天下午为之给我发了一个有关于button的line-height问题的文章——《The Firefox Input Button Line-Height Bug》。看后明白了许多，顺便整理了一下，与大家一起知道这个问题。

下面我们先来看一个Demo的实例：

HTML Code

    <input type="submit" id="button" value="engage"/>
  

CSS Code