zoukankan      html  css  js  c++  java
  • 令人郁闷的 DOCTYPE

    最近在尝试一些基于 web standard 的开发。碰到了 DOCTYPE 的问题。
    翻阅了 w3c 的这个列表网页:http://www.w3.org/QA/2002/04/valid-dtd-list.html
    知道在 html4.01 下 DOCTYPE 有三种。分别是 transitional(过渡时期的), strict(严格的),和 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">

    但是我发现除了w3c网页上列举的这些之外,还有一种就是把 transitional 里的 loose.dtd 引用去掉。像这样:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    这个不知道是否标准?反正我发现我的 EditPlus 自动生成的是这样的。还有查看了 http://www.blueidea.com 的就是这样的.

    按照 w3c 的说法是,推荐尽量在可能的情况下使用 strict.dtd, 在需要支持一些旧的样式特性的时候,可以使用 transitional (当然这些不被推荐的样式以后是要逐步废除的)。

    下面结合我的项目实际情况说一下。因为是在触摸屏里显示的网页,要求不出现滚动条。于是这个我用 body {margin: 0; overflow: hidden;} 来控制。
    而另一方面,页面里我在不少地方采用了 web 标准推荐的布局方法,利用 div 之类的东西来定位。有一个很常用的, 居中。通常采用类似下面的代码来实现:

    <style type="text/css">
    #something { 200px; margin: auto;}
    </style>

    但是我发现这两个特性似乎不能同时被支持。于是我写了下列文档进行了测试:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="Roger Chen">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style type="text/css">
    body 
    {overflow: hidden;}
    #test 
    {width: 300px; margin: auto; border: 1px solid green;}
    </style>
    </head>
    <body>
    a
    <br>a<br>
    <div id="test">this is a test</div>
    a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    </body>
    </html>


    测试方法:在这个文档的最前面插入上面提到的这几个 dtd.
    令人郁闷的测试结果:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    -----------------------
    overflow  支持。
    margin: auto 不支持。

    这个不写 dtd 感觉上和整个去掉这一行 DOCTYPE 的声明是一样的效果.

    loose.dtd
    -----------------------
    overflow  不支持.
    margin: auto 支持.

    strict.dtd
    -----------------------
    overflow  不支持。
    margin: auto    支持。

    有没有人能告诉我怎样才能两个特性都支持的。或者如果有别的方法实现隐藏滚动条也好.谢谢。 否则我只能说 "web standard, 想要爱你真的好难" 了 

  • 相关阅读:
    js中setTimeout、setInterval、 clearInterval方法简介
    分享一个VS2008漂亮的黑色主题
    最简单的设计模式
    记一次查数据的需求
    Oracle常用存储过程写法
    关于域名解析
    使用PHP打造QQ空间神奇图片
    自制小工具含源码——SPTC上海交通卡余额查询
    自制小工具含源码——博客园图床ImageBed
    不可不知的mysql 常用技巧总结
  • 原文地址:https://www.cnblogs.com/RChen/p/107426.html
Copyright © 2011-2022 走看看