布局一个表单,想实现垂直居中的效果,用的方法很普通,就是设置高度=line height的把戏,在网上找了实例,例子管用,我copy了例子的html和css,却死活不管用。苦思冥想,得瑟了半天,才返现又掉进了DOCTYPE的陷阱。

起因

我要布局的表单很简单,效果如下

正确的效果

HTML和CSS是这样的

<!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>
<title>垂直居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	.reg{ background:#D3FFFF; height:74px;}
	label { width:250px; float:left; line-height:74px; text-align:right; margin-right:10px;}
	.field { width:250px; float:left; line-height:74px; }
</style>
</head>

<body>
<div class="reg">
	<label>邮箱</label>
	<div class="field">
		<input type="text" name="email" value="" />
	</div>
</div>   
</body>
</html>

但实际运行效果却是这样

错误的效果

class为field的div已经设置了line-height与父级div的height相同,按理说应该可以实现剧中效果。但只要div包围的是表单元素就不行,其他元素像p、div、span都可以实现居中效果,我就奇了怪了。

解决

百思不得其解,结构和样式都一样,为什么结果不同?

偶然瞥了一眼示例网站的开头,赫然写着

<!DOCTYPE html>
<html lang="en-US" dir="ltr">

DOCTYPE好短啊,和我的不一样,我把DOCTYPE改成了这个,晕,竟然行了,又被DOCTYPE耍了一把。

DOCTYPE

那个超短的DOCTYPE声明是HTML5的,如果仔细看WordPress的默认主题twentyeleven,就能发现它的DOCTYPE也是这样写的。我写的也是一个标准的DOCTYPE声明,却出现了如此大的解析差异。

下面是常用DOCTYPE的列表

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
	
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
	
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5 [NOT a standard yet]

<!DOCTYPE HTML>

14条留言

  1. 确实对游览器声明这个很重要
    火狐还好 到了ie8以下简直惨不忍睹

  2. 最近好像发现了原因:用那个测试的代码存成名称为 test.html 的话 firefox 渲染会有问题,页面类型认成 text/html;但是如果文件名为 test.xhtml 的话 firefox 会认出 XHTML,页面类型显示为 application/xhtml+xml,渲染正常……

    为什么浏览器死认扩展名而无视 meta 标签……

  3. 这个还真没碰到过.

  4. 小博客无所谓,但是大型网站,还是用固定的DOCTYPE比较好。

    1. 是的,我以前一直用XHTML 1.0的,遭遇这个问题以后决定同意用HTML5的,虽然这没成为正式的标准,但很多网站都在用

  5. 没弄明白,DOCTYPE怎么会影响浏览器解析网页?我记得浏览器好像完全不会理会DOCTYPE,DOCTYPE只是写给验证器看的

    1. 这个影响可不小,特别是IE,哪天要是看到一个模板在IE9里面表现异常,估计就是DTD没写好,我以前也被这东西折腾过,当时写的文章谨防浏览器的怪异模式捣乱 还有一个朋友给ckeditor加表情,各种尝试都有样式问题,连IE9里都不正常,研究了几天发现DTD声明写错了,改对了立刻啥事都没了。

      1. 似乎只有反人类的IE会检测DOCTYPE,根据DTD声明确定标准模式或兼容模式,我一直是写,这样不管在什么浏览器都是触发标准模式,感谢html5

        1. 我原来也觉得只有IE对这个着迷,不过我文中提到的问题在所有浏览器中都存在,只要满足条件:

          DOCTYPE用XHTML 1.0 Transitional
          用line-height=height的方式设置div在parent div中垂直居中
          div中包裹的是表单元素
          =>在最新版的Firefox或者Chrome都会出现div不垂直居中的问题

          我觉得很纳闷,这是第一次遇到DOCTYPE影响IE之外的浏览器的情况

          1. soga,其实不用纠结,doctype html解决一切问题。
            另外请问如何修改wp默认wp_list_comments函数,改变评论列表内容,比如默认名称是显示“%s 说道”,如何去掉“说道”两字?

评论功能已关闭