昨天在《表单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

最近一直在学习这个Responsive设计相关知识点，前面我在本站陆续发布了与“Responsive”设计的相关教程：

Progress Bar直译过来就是“进度条”，也就是说今天要和大家一起探讨进度条的作方法。我想进度条大家都有看到过，而且还随处可见，他们表示的是某个过程，显示目前完成状态。最常见的是文件的上传和下载，有一个动态的进度条，通过这个进度可的动态变化告诉我们文件上传或下载的完成程度。换而言之，无论在某一个点或一个桌面程序，或者说我们的Web应用程序或，我们都需要使用到进度条的UI制作。那么在这篇文章中，我和大家一起来学习如何使用CSS3的相关属性来创建一个时尚的、动态的进度条，而且还将扩展一部分jQuery代码，让其从0至100％动态完成。

我们首先来看一看下面的DEMO效果：

下面我们针对上面的DEMO来说说其制作过程。

前面花了几个篇幅着重介绍了CSS的选择器的使用，我将其分成三个部分：CSS基本选择器、CSS属性选择器以及CSS伪类选择器。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的，所以今天先从选择器开始入手，加强自己。如果你也感兴趣那就跟我一起来吧。

今天使用CSS3的伪类“:before”和":after"和animation等相关属性创建一个简单的共享工具提示栏效果。关键的一点是，我使用最少的HTML标签，以及不使用任何jQuery和javaScript脚本。但兼容性就惨了，这个大家都懂的。所以下面的效果只适合Firefox、Safari、Chrome和Opera浏览器。不过这种效果大家在平时制作中肯定常常使用到。那下面我们一起来看如何制作吧。

目标

使用纯CSS代码实现下面的DEMO效果：

Responsive这个词，这段时间公司老是在提，致使我大量的查找相关方面的资料学习。总算是能做出小小的东西出来，也让自己有点满足感。今天我想和大家一起来学习web designer wall的《Responsive Design with CSS3 Media Queries》教程。从这篇教程中，我们可以学会如休何使用CSS3的Media Queries属性来实现Responsive设计。

说起浮动大家并不陌生,因为有 Word 中看到太多的浮动围绕现象。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”

大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构，但他不能让我们实现美丽的页面制作，此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果，但其在不同的浏览器下是有不可预知的效果，为了让你的CSS能解决这些不一致下，今天给大家介绍25个CSS技巧代码，我相信这些对你肯家有很大的作用。

一、使用text-indent来隐藏文本

这个常用在图片替换文本中，最常见的就是使用使用图片来替换Logo，这个是非常有用的，使用“text-indent”我们可以达到图片替换文本的效果，而且方便搜索引擎的优化，还能支持阅读器阅读网页内容：

			h1 {
				text-indent:-9999px;
				margin:0 auto;
				width:400px;
				height:100px;
				background:transparent url("images/logo.jpg") no-repeat scroll;
			}
		

当然，这个只是使用“text-indent"替换文本的一种效果，其实他还有更多的方法。

扩展阅读：