为什么某些DOCTYPE声明会导致100%高亮表格和div停止工作? [英] Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?

查看:124
本文介绍了为什么某些DOCTYPE声明会导致100%高亮表格和div停止工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我看来,IE(6-8)中的一些 DOCTYPE 声明可能会导致浏览器忽略 height =100%在表格和div上( style =height:100%

/ p>

 <!DOCTYPE html PUBLIC -  // W3C // DTD HTML 4.01 Transitional // EN
http ://www.w3.org/TR/html4/loose.dtd>
< html>
< head>
< title> Test1< / title>
< / head>
< body>
< div style =border:2px solid red; height:100%>
Hello World
< / div>
< / body>
< / html>

呈现 DIV 的高度为文字,它不会伸展。删除 DOCTYPE 声明会导致 DIV 根据需要垂直拉伸。



所以我的问题是:
$ b $ ol

  • 为什么会发生这种情况?

  • 保持 DOCTYPE 仍然允许表格拉伸?

  • 它发生在你身上吗?

  • 您知道吗?,是否知名?
  • / div>


    1. 由于古老的浏览器具有奇怪的不一致的行为,并且浏览器将Doctypes视为智能测试,了解作者是否正在为标准编写代码,或者从十年前的W3School中学到什么。如果你有 height:100%,并且父元素的高度是 auto ,那么 100%表示 auto


    2. 一般而言,您不会。它尖叫着布局表格。也就是说,设置html和body元素的高度或最小高度。还有其他技术,但我目前没有方便的链接,奇怪的是,我从未处于需要这种技术的位置。

    3. 我正在回答这个问题...


    It seems to me that some DOCTYPE declarations in IE (6-8) may cause the browser to ignore height="100%" on tables and divs (style="height:100%")

    E.g

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
     <title>Test1</title>
     </head>
     <body>
      <div style="border: 2px solid red; height: 100%">
      Hello World
      </div>
     </body>
    </html>
    

    Will render the DIV with the height of the text, it will not stretch. Removing the DOCTYPE declaration causes the DIV to stretch vertically as desired.

    So my questions are:

    1. Why does it happen?
    2. How do you keep the DOCTYPE and still allow tables to stretch?
    3. Does / did it happen to you?
    4. Did you know about it?, is it well known?

    解决方案

    1. Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago. If you have height: 100% and the height of the parent element is auto then 100% means auto.

    2. Generally, you don't. It screams "layout table". That said, set heights or minimum heights on the html and body elements. There are other techniques, but I don't have a handy link at the moment as, oddly, I've never been in a position where I needed the technique.

    3. It is what browsers are supposed to do, so …

    4. Well, I am answering this question …

    这篇关于为什么某些DOCTYPE声明会导致100%高亮表格和div停止工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆