doctype的影响

最新推荐文章于 2024-07-22 17:09:19 发布

peswe

最新推荐文章于 2024-07-22 17:09:19 发布

阅读量422

点赞数

分类专栏： Javascript 文章标签： xhtml firefox html border 框架 generator

本文链接：https://blog.csdn.net/peswe/article/details/4513226

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

以前转过一篇文章说的是css中可以用!important分别设置ie、firefox的样式，转之前我亲手测试过，绝对不会有假的
但是今天当我再用这个方法的时候，却发现这个方法并没有效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <mce:style></mce:style><style mce_bogus="1">#test{background-color:green !important;background-color:blue;}</style> </head> <body> <div id='test' style="width:200px;height:500px;border:10px solid #ccc"> </div> </body> </html>

以上代码，在ie和firefox中框的背景色显示的都是绿色，与我期待的在ie中显示蓝色（background-color:blue;），在firefox中显示绿色background-color:green）并不一致；

而在另一个例子中，得到的结果却与我以前写的结论一致：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:style></mce:style><style mce_bogus="1">.colortest { border:20px solid #60A179 !important; border:20px solid #00F; padding: 30px; width : 300px; } </style> </HEAD> <BODY> <div class='colortest'>some test</div> </BODY> </HTML>

firefox中采用：border:20px solid #60A179 !important;ie中：border:20px solid #00F;

对比发现，这个偏差的导致者就是：DOCTYPE （关于doctype的简单说明可以参照：http://www.blueidea.com/tech/web/2007/5172.asp）

XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）：

1．过渡的

一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：

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

2．严格的

一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如<br/>等。严格的DTD的写法如下：

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

3．框架的

一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：

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

根据上面两个实例，得出结论：

当doctype声明为：过渡的（Transitional），ie7不能识别!important
而当doctype声明为：严格的（Strict），ie7是可以识别!important的

关于ie6、ie7、firefox中css hack可参考：http://hi.baidu.com/smallmenu/blog/item/f57c02608e42e241ebf8f8ab.html

======================================================================

另外，doctype的声明还会影响页面的clientWidth,如下例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>Position</title></head> <body> <div style="width:200px;height:50px;margin:25px;left:50px;top:50px;border:25px solid #333;padding:25px;position:relative"> set position <div style="width:200px;height:50px;margin:25px;padding:25px;left:50px;top:50px;border:25px solid #ccc;position:absolute"> soem weords </div> </div> <div style="width:300px;height:50px;background-color:red"> normal div </div> <div id="fixbox" style="width:200px;height:50px;border:25px solid #ccc;position:fixed">some test</div> <mce:script type="text/javascript"></mce:script> </body> </html>

在上例中，如果有doctype的声明（Transitional/strict皆可），则document.body.clientHeight和document.body.scrollHeight相等（我的电脑

商显示的都为2550）；而且，此时，固定定位：position:fixed是有效的
如果把doctype去掉，两个值就不同了document.body.clientHeight：854，document.body.scrollHeight：2634；而且此时固定定位是无效的

peswe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
doctype的影响

以前转过一篇文章说的是css中可以用!important分别设置ie、firefox的样式，转之前我亲手测试过，绝对不会有假的但是今天当我再用这个方法的时候，却发现这个方法并没有效果： #test{background-color:
复制链接

扫一扫