使用diff和patch制作及打补丁

本文最终总结出来办法就是要对齐的表单内容（含文字、图片、表单各种元素、label）字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)，其中个别的input元素如radio的padding和margin设置为0，即可完美解决表单元素input等对齐问题。

最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示：

于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：

在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点：

1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。

2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心

（baseline等名词如果不懂，请先阅读wheatlee的文章）

按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码：

body{font-size:12px;}



测试文字

代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下：

事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候，是该元素的中心对齐周围元素的中心”的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一般偏上1px，有时在一半偏下1px)。如图：

但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用 vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来对齐的）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于“文字”来说的。那么，如果不是文字呢…？如果复选框后面跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个“块”，然后依照类似图片的规则进行渲染呢？如果那样，我们就达到目的了。

但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图：

如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图：

在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。

经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于 vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”

但是经过仔细总结和分析，发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系，两者同时影响着渲染结果(虽然不明白为什么会这样)。那么，既然现在的情况以及非常接近于希望的状态了，是否可以通过设置字体的方式来改变小写x的中心点的位置，进而对垂直对齐的结果进行“微调”呢？

最终，在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。
最终效果：

至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。提示文字依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：

于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框checkbox也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而 IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：

在做开发的过程中难免需要给内核及下载的一些源码打补丁，所以我们先学习下Linux下使用如如何使用diff制作补丁以及如何使用patch打补丁。

首先介绍一下diff和patch。
1、diff
－－－－－－－－－－－－－－－－－－－－
NAME
diff - find differences between two files
SYNOPSIS
diff [options] from-file to-file
－－－－－－－－－－－－－－－－－－－－
简单的说，diff的功能就是用来比较两个文件的不同，然后记录下来，也就是所谓的diff补丁。语法格式：diff 【选项】 源文件（夹） 目的文件（夹），就是要给源文件（夹）打个补丁，使之变成目的文件（夹），术语也就是“升级”。下面介绍三个最为常用选项：
-r 是一个递归选项，设置了这个选项，diff会将两个不同版本源代码目录中的所有对应文件全部都进行一次比较，包括子目录文件。
-N 选项确保补丁文件将正确地处理已经创建或删除文件的情况。
-u 选项以统一格式创建补丁文件，这种格式比缺省格式更紧凑些。
2、patch
－－－－－－－－－－－－－－－－－－
NAME
patch - apply a diff file to an original
SYNOPSIS
patch [options] [originalfile [patchfile]]
but usually just
patch -pnum
－－－－－－－－－－－－－－－－－－
简单的说，patch就是利用diff制作的补丁来实现源文件（夹）和目的文件（夹）的转换。这样说就意味着你可以有源文件（夹）――>目的文件（夹），也可以目的文件（夹）――>源文件（夹）。下面介绍几个最常用选项：
-p0 选项要从当前目录查找目的文件（夹）
-p1 选项要忽略掉第一层目录，从当前目录开始查找。

---

在这里以实例说明：
— old/modules/pcitable Mon Sep 27 11:03:56 1999
+++ new/modules/pcitable Tue Dec 19 20:05:41 2000
如果使用参数-p0，那就表示从当前目录找一个叫做old的文件夹，在它下面寻找modules下的pcitable文件来执行patch操作。
如果使用参数-p1，那就表示忽略第一层目录（即不管old），从当前目录寻找modules的文件夹，在它下面找pcitable。这样的前提是当前目录必须为modules所在的目录。而diff补丁文件则可以在任意位置，只要指明了diff补丁文件的路径就可以了。当然，可以用相对路径，也可以用绝对路径。不过我一般习惯用相对路径。
-E 选项说明如果发现了空文件，那么就删除它
-R 选项说明在补丁文件中的“新”文件和“旧”文件现在要调换过来了（实际上就是给新版本打补丁，让它变成老版本）
下面结合具体实例来分析和解决，分为两种类型：为单个文件打补丁和为文件夹内的多个文件打补丁。
环境：在RedHat 9.0下面以armlinux用户登陆。
目录树如下：
|– bootloader
|– debug
|– images
|– kernel
|– program
|– rootfiles
|– software
|– source
|– sysapps
|– tmp
`– tools
下面在program文件夹下面建立patch文件夹作为实验用，然后进入patch文件夹。

一、为单个文件进行补丁操作
1、建立测试文件test0、test1
[www.linuxidc.com@linuxidc patch]$ cat >>test0< > 111111

111111
111111
EOF
[www.linuxidc.com@linuxidc patch]$ more test0

111111
111111
111111
[www.linuxidc.com@linuxidc patch]$ cat >>test1< > 222222

111111
222222
111111
EOF
[www.linuxidc.com@linuxidc patch]moretest12222221111112222221111112、使用diff创建补丁test1.patch[www.linuxidc.com@linuxidcpatch] diff -uN test0 test1 > test1.patch
【注：因为单个文件，所以不需要-r选项。选项顺序没有关系，即可以是-uN，也可以是-Nu。】
[www.linuxidc.com@linuxidc patch]lstest0test1test1.patch[www.linuxidc.com@linuxidcpatch] more test1.patch

---

patch文件的结构
补丁头
补丁头是分别由—/+++开头的两行，用来表示要打补丁的文件。—开头表示旧文件，+++开头表示新文件。
一个补丁文件中的多个补丁
一个补丁文件中可能包含以—/+++开头的很多节，每一节用来打一个补丁。所以在一个补丁文件中可以包含好多个补丁。
块
块是补丁中要修改的地方。它通常由一部分不用修改的东西开始和结束。他们只是用来表示要修改的位置。他们通常以@@开始，结束于另一个块的开始或者一个新的补丁头。
块的缩进
块会缩进一列，而这一列是用来表示这一行是要增加还是要删除的。
块的第一列
+号表示这一行是要加上的。
-号表示这一行是要删除的。
没有加号也没有减号表示这里只是引用的而不需要修改。

---

diff命令会在补丁文件中记录这两个文件的首次创建时间，如下
— test0 2006-08-18 09:12:01.000000000 +0800
+++ test1 2006-08-18 09:13:09.000000000 +0800
@@ -1,3 +1,4 @@
+222222
111111
-111111
+222222
111111
[www.linuxidc.com@linuxidc patch]patch−p0<test1.patchpatchingfiletest0[www.linuxidc.com@linuxidcpatch] ls
test0 test1 test1.patch
[www.linuxidc.com@linuxidc patch]cattest02222221111112222221111113、可以去除补丁，恢复旧版本[www.linuxidc.com@linuxidcpatch] patch -RE -p0 < test1.patch
patching file test0
[www.linuxidc.com@linuxidc patch]lstest0test1test1.patch[www.linuxidc.com@linuxidcpatch] cat test0
111111
111111
111111
二、为多个文件进行补丁操作
1、创建测试文件夹
[www.linuxidc.com@linuxidc patch]mkdirprj0[www.linuxidc.com@linuxidcpatch] cp test0 prj0
[www.linuxidc.com@linuxidc patch]lsprj0test0test1test1.patch[www.linuxidc.com@linuxidcpatch] cd prj0/
[www.linuxidc.com@linuxidc prj0]lstest0[www.linuxidc.com@linuxidcprj0] cat >>prj0name< > ——–

prj0/prj0name

EOF
[www.linuxidc.com@linuxidc prj0]$ ls
prj0name test0

[www.linuxidc.com@linuxidc prj0]$ cat prj0name

prj0/prj0name

[www.linuxidc.com@linuxidc prj0]cd..[www.linuxidc.com@linuxidcpatch] mkdir prj1
[www.linuxidc.com@linuxidc patch]cptest1prj1[www.linuxidc.com@linuxidcpatch] cd prj1
[www.linuxidc.com@linuxidc prj1]$ cat >>prj1name< > ———

prj1/prj1name

EOF

[www.linuxidc.com@linuxidc prj1]$ cat prj1name

prj1/prj1name

[www.linuxidc.com@linuxidc prj1]$ cd ..

2、创建补丁
[armlinux@lqm patch]diff−uNrprj0prj1>prj1.patch[armlinux@lqmpatch] more prj1.patch

diff -uNr prj0/prj0name prj1/prj0name
— prj0/prj0name 2006-08-18 09:25:11.000000000 +0800
+++ prj1/prj0name 1970-01-01 08:00:00.000000000 +0800

@@ -1,3 +0,0 @@

-prj0/prj0name

diff -uNr prj0/prj1name prj1/prj1name
— prj0/prj1name 1970-01-01 08:00:00.000000000 +0800
+++ prj1/prj1name 2006-08-18 09:26:36.000000000 +0800
@@ -0,0 +1,3 @@
+———
+prj1/prj1name
+———
diff -uNr prj0/test0 prj1/test0
— prj0/test0 2006-08-18 09:23:53.000000000 +0800
+++ prj1/test0 1970-01-01 08:00:00.000000000 +0800
@@ -1,3 +0,0 @@
-111111
-111111
-111111
diff -uNr prj0/test1 prj1/test1
— prj0/test1 1970-01-01 08:00:00.000000000 +0800
+++ prj1/test1 2006-08-18 09:26:00.000000000 +0800
@@ -0,0 +1,4 @@
+222222
+111111
+222222
+111111

[armlinux@lqm patch]lsprj0prj1prj1.patchtest0test1test1.patch[armlinux@lqmpatch] cp prj1.patch ./prj0
[armlinux@lqm patch]cdprj0[armlinux@lqmprj0] patch -p1 < prj1.patch
patching file prj0name
patching file prj1name
patching file test0
patching file test1
[armlinux@lqm prj0]lsprj1nameprj1.patchtest1[armlinux@lqmprj0] patch -R -p1 < prj1.patch
patching file prj0name
patching file prj1name
patching file test0
patching file test1
[armlinux@lqm prj0]lsprj0nameprj1.patchtest0－－－－－－－－－－－－－－－－－－－总结一下：单个文件diff–uNfrom−fileto−file>to−file.patchpatch–p0<to−file.patchpatch–RE–p0<to−file.patch多个文件diff–uNrfrom−docuto−docu>to−docu.patchpatch–p1<to−docu.patchpatch–R–p1－－－－－－－－－－－－－－－－－－－三、应用为内核打补丁。1、首先是解压，因为发布的补丁文件都是使用gzip压缩的。gunzip ../setup-dir/ patch-2.4.21-rmk1.gz
2、然后进入你的内核源代码目录
cdlinux−2.4.213、打补丁patch –p1 < ../../setup-dir/patch-2.4.21-rmk1