最新消息:

认识DOCTYPE,丢失则ie中div无法居中一(转)

Web前端开发 大步 946浏览 0评论

 

带着问题入手:想获取浏览器可视高度,为什么利用document.body.clientHeight有时候会失效,上网搜索之后使用document.documentElement.clientHeight能解决,但有时候也会出问题。

 

当我们打开一个网页的源代码,一般我们会看到第一行都是<!DOCTYPE……,这样的文字,DOCTYPE后面的文字会有所差别,这个东西到底有什么用处呢?

这篇文章就来说说这个DOCTYPE。

 

1、通过搜索引擎,我们可以搜索到DOCTYPE的一些介绍,但总是怕别人讲的不全或者有问题,那就请访问http://www.w3.org/QA/2002/04/valid-dtd-list.html,这是W3C组织的官方网站上的介绍,里面很详细的列出了可供定义的DOCTYPE,我们一般用到的是如下3个:

 

<!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">

 

DOCTYPE描述主要就是告诉浏览器使用什么dtd来解析html代码,否则就会使用浏览器默认的来解析,会造成不同浏览器的显示样式不同。

 

 

以下是从手册上摘抄的规则:

 

语法:

HTML 顶级元素 可用性 "注册//组织//类型 标签//定义 语言""URL"

 

可能值:

- 顶级元素:指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。

- 可用性:指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源,如本地文件或 URL。

- 注册:指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。

- 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。

组织:指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称,即 OwnderID。 IETF IETF。 W3C W3C。

- 类型:指定公开文本类,即所引用的对象类型。 DTD 默认。DTD。

- 标签:指定公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML 默认。HTML。

- 定义:指定文档类型定义。

Frameset 框架集文档。

Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素,因为样式表已经很完善了。

Transitional 包含除 frameSet 元素的全部内容。

- 语言:指定公开文本语言,即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN 默认。英语。

- URL:指定所引用对象的位置

 

为了获得正确的DOCTYPE声明,关键就是让dtd与文档所遵循的标准对应。例如,假定文档遵循的是xhtml 1.0 strict标准,文档的doctype声明就应该引用相应的dtd。另一方面,如果doctype声明指定的是xhtml dtd,但文档包含的是旧式风格的html标记,就是不恰当的;类似地,如果doctype声明指定的是html dtd,但文档包含的是xhtml 1.0 strict标记,同样是不恰当的。

 

2、DOCTYPE的用法,DOCTYPE描述都是放在页面的开始位置。

让我们来看一个例子:

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>
<title>test DOCTYPE</title>
</head>
<style>
#test{
border:1px dashed windowtext;
height:20px;
width:30px;
padding:10px;
margin:auto;
}
</style>
<body>
<div id="test">

</div>
</body>
</html>

 

这段代码在ie、firefox和chrome中打开的效果是,div居中。

但我们把DOCTYPE这段描述删除,看看效果如何。在firefox和chrome中效果没有变化,而在ie中就会发现div就在左边了,而并没有居中。当我们把margin:auto放到搜索引擎中进行搜索的时候,会有一堆人回答你用这个可以让div居中,但他们不会告诉你要使这个有效果的前提是有DOCTYPE。

 

但在ie中也会有情况是没有DOCTYPE才会起作用,我们看代码:

 

<!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>test DOCTYPE</title>
</head>
<style>
#test{
cursor:col-resize;
height:200px;
width:300px;
position:absolute;
}
</style>

<body>
<div id="test">

</div>
</body>
</html>

 

本来的目的是想把test这个div上的鼠标手势修改为col-resize,但在ie中却发现不起作用,但我们把DOCTYPE描述删除掉之后就会发现生效了,而在Firefox中始终都有效。

修改方法如下:

(1)删除DOCTYPE描述;

(2)当然这里我们也可以保留DOCTYPE,在样式中增加background-color:#FFFFFF;就可以看到效果,而默认的background-color是transparent;

(3)position删除。

第2种解决方法在某些环境下不可行,div下面有一个背景图,那这个div设置了背景色就会影响效果;第3种方法基本上不考虑,设置这个position大部分时候都是程序所需。

这个大家可以在访问https://tools.alibaba-inc.com这些平台的首页的时候,那个分隔条拖动就是这个情况,我的解决方法是删除DOCTYPE。

 

3、transitinal.dtd、strict.dtd、frameset.dtd的区别

只是在写html标签的时候区别不是很大,我也就介绍一下对js代码的影响,由于现在的浏览器对html代码的容错能力很强,即使有语法错误也不会给与提示。

(1)frameset.dtd,如果我们的页面需要使用到frameset的话,需要使用这个dtd,否则都不允许使用;

(2)strict.dtd,严格的控制,使用这种模式之后,所有表现层的标签都不允许使用了,例如:br,b,i这些都属于表现层的标签。但目前的浏览器容错能力很强,不会强制报错,还是会正常的显示;

(3)transitional.dtd,过渡期控制,在strict的基础上兼容老的标签。

 

现在的浏览器解析html的时候,strict.dtd和transitional.dtd基本上没什么差别,如果严格按照W3C的约定去做的话,估计大部分网页在这种浏览器下都会变形,市场机会完全失去。

 

但我们去研究js的时候,会发现有没有定义DOCTYPE在某些js中产生的结果会不一样,请看例子:

 

<!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>
<style>
.info{
background-color:#ad6a9e;
padding:10px;
color:#444444;
}
</style>
<script>
function getHeight(){
var ht = document.body.clientHeight;
alert(ht);
}
</script>
</head>

<body>
<div class="info">
中新网12月24日电 据国家气象局网站消息,受强冷空气影响,未来三天,中国大部地区自西向东将迎来一次寒潮天气过程,西北地区东部偏北地区、西北地区北部和中东部、内蒙古大部、华北、东北、黄淮、江淮等地将先后出现5~7级,阵风8级偏北风;冷空气前锋过后,上述大部地区的气温将下降8~12℃,其中内蒙古中部和东南部、陕西北部、山西北部、河北北部、辽宁西部、吉林西部的气温将下降14~16℃,部分地区降温幅度可达16~18℃。内蒙古东北部、东北地区等地的部分地区有大雪或暴雪。受另一股冷空气影响,25日,新疆北部将有5~6级、山口地区8~9级大风,气温在24日回升的基础上,将下降4~8℃。
<input type="button" value="获取可视高度" onclick="getHeight();"/>
</div>
</body>
</html>

 

ie6、firefox、chrome浏览器的最终结果如下:

浏览器 IE6 firefox 3.0.16 chrome
结果 96 97 100

显然这个不是我们想要的可视高度,倒像是这个网页中的内容高度。

 

那我们把DOCTYPE删除之后,再看看结果如何:

浏览器 IE6 firefox 3.0.16 chrome
结果 726 709 805

这3个值就是我们最终想要的浏览器的可视高度了。

但删除DOCTYPE不就违背了w3c的原则了么,那有没有办法不删除DOCTYPE,也同样可以获得正确的结果,我们来看下面这段代码:

<!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>
<style>
.info{
background-color:#ad6a9e;
padding:10px;
color:#444444;
}
</style>
<script>
function getHeight(){
var ht = document.documentElement.clientHeight;
alert(ht);
}
</script>
</head>

<body>
<div class="info">
中新网12月24日电 据国家气象局网站消息,受强冷空气影响,未来三天,中国大部地区自西向东将迎来一次寒潮天气过程,西北地区东部偏北地区、西北地区北部和中东部、内蒙古大部、华北、东北、黄淮、江淮等地将先后出现5~7级,阵风8级偏北风;冷空气前锋过后,上述大部地区的气温将下降8~12℃,其中内蒙古中部和东南部、陕西北部、山西北部、河北北部、辽宁西部、吉林西部的气温将下降14~16℃,部分地区降温幅度可达16~18℃。内蒙古东北部、东北地区等地的部分地区有大雪或暴雪。受另一股冷空气影响,25日,新疆北部将有5~6级、山口地区8~9级大风,气温在24日回升的基础上,将下降4~8℃。
<input type="button" value="获取可视高度" onclick="getHeight()"/>
</div>
</body>
</html>

 

就是把document.body修改为document.documentElement,测试的结果如下:

 

浏览器 IE6 firefox 3.0.16 chrome
结果 726 709 805

和上面的结果一致,测试通过。

 

那我们应该找到一种方法可以解决没有DOCTYPE以及有DOCTYPE都可以正确返回结果的,兼容性做到最好。

 

请看如下代码:

 

<!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>compatMode</title>
</head>

<body>
<script>
document.write(document.compatMode);
</script>
</body>
</html>

 

 

保留DOCTYPE,页面显示的结果是CSS1Compat;而删除了DOCTYPE之后,看到的结果是BackCompat,由此我们可以得到结论,应该就是这个document.compatMode影响了我们的clientHeight结果。

 

既然找到原因,那么我们就把上面的获取clientHeight代码修改一下:

js代码:

function getHeight(){
var flag = document.compatMode == "CSS1Compat";
if(flag){
var ht = document.documentElement.clientHeight;
}
else{
var ht = document.body.clientHeight;
}

alert(ht);
}

 

这样测试结果,不论是否删除,我们都可以获得正确的clientHeight,同样的clientWidth也是如此操作。

 

通过以上的介绍,我们知道了JS不仅有不同浏览器的兼容性问题需要考虑,不同的页面定义也会造成返回结果的变化,所以有以下几点值得注意:

(1)       我们在编写页面的时候,都带上DOCTYPE这个声明,不要轻易的将其删除,除了使用frameset的地方,其他网页都使用transitional.dtd这种类型;

(2)       在编写js的时候,在获取页面的clientHeight,clientWidth,scrollHeight,scrollWidth,scrollLeft,scrollTop这些属性的时候,都需要增加对document.compatMode的判断,这样才可以保证我们的js有更强的兼容性。

原文地址

 

第二篇文章:

这段代码在FF中可以居中,而在IE6/7/8中均不能居中。换成:MARGIN-RIGHT: auto; MARGIN-LEFT: auto;也一样,而且,居右margin:0pt 0pt 0pt auto;的也失效了

而这段代码在FF和IE中都可以居中,两者的区别仅在于开头是否有Doctype声明

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

如果没有这句话,在IE6/7/8中只用margin:0 auto;是无法实现居中的,而在FF中却可以。

如果加了doctype声明,则在一个body下的div,只用margin:0 auto;即可在IE和FF中都实现居中。

之前写的那篇《DIV、UL、li、image水平竖直居中代码大全(for ie firefox opera)》应该再加上一点,就是

“如果有Doctype声明,则完全可以不需要在上一层中使用text-align:center,毕竟这句加了连下级的文字都变居中了。所以DIV最好的居中方法应该是:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

margin:0 auto; ”

调试中还发现,IE的div默认height是有一定的值的,而FF如果没写height参数就默认为0了,就看不出div了,如第二个例子在firefox下是看不出层的,而在IE下可以,在FF下调试,所以若要在ff下调试,应该再加上高度height

 原文地址

 

转载请注明:大步's Blog » 认识DOCTYPE,丢失则ie中div无法居中一(转)

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

SiteMap