在企图将Edgar Hoo Home Page的静态页面的重用代码函数化，以期改版少费力，却发现虽调用PHP函数所输出的HTML代码同原HTML代码一模一样，但除Opera (10 alpha)、Safari (3.2)将两者解释相同之外，而主流的IE系、FF (3.1 beta 2)及Chrome (1.0)竟将前者在顶部多解释出一行空行。
为便说明问题，现作简易页面。
原HTML代码如下（php-function-html-output-blank-lines.html）：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="Content-Language" content="UTF-8" />
- <title>EdgarHoo.com Lab</title>
- <link href="pfhobl.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
- </head>
- <body>
- <div id="wrapper">
- <div id="header">
- <h1>EdgarHoo.com Lab</h1>
- </div>
- </div>
- </body>
- </html>
CSS代码如下：
- *{
- margin:0;
- padding:0;
- }
- body{
- color:#fff;
- background:#000;
- text-align:center;
- }
- #wrapper{
- width:800px;
- height:auto;
- margin:0 auto;
- }
- #wrapper #header{
- height:50px;
- background:#f00;
- }
PHP函数文件（php-function-html-output-blank-lines-include.php），代码如下：
- <?php
- function head(){
- ?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="Content-Language" content="UTF-8" />
- <title>EdgarHoo.com Lab</title>
- <link href="style.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
- </head>
- <body>
- <div id="wrapper">
- <?php
- }
- function foot(){
- ?>
- </div>
- </body>
- </html>
- <?php
- }
- ?>
PHP文件（php-function-html-output-blank-lines.php），如下：
- <?php
- require('inc.php');
- head();
- ?>
- <div id="header">
- <h1>EdgarHoo.com Lab</h1>
- </div>
- <?php
- foot();
- ?>
此次不作截图，有兴趣的同学可自行使用相关浏览器测试。
测试地址：原版HTML、PHP函数化后的HTML
@ Dec. 13, 2008 SCUTA
---分割线---
其实这就是PHP诡异的空行，只要将页面编码从utf-8转到utf-8无BOM格式就可以避免。