严格的文档类型和内联 css答案

【问题标题】：strict doctype and inline css严格的文档类型和内联 css
【发布时间】：2009-12-23 17:02:53
【问题描述】：

在我的 html 文件中，当我写这个时，它显示正确。

<div class="event" style="top: 30px; left: 10px; width: 584px; height: 80px;">

但是一旦我设置了严格的文档类型，样式就消失了。所以在 firbug 中我只看到 style=""。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>.....<body>
<div class="event" style=""></div></body></html>

完整的html代码：

<html>
<head>
<title>calendar</title>
<style type="text/css">
    * {
    margin:0;
    padding:0;
    }

    body {
    font-family:arial;
    margin:10px;
    }
    #canvas {
    width:600px;
    height:720px;
    padding:0 10px;
    background:#ececec;
    margin-left:75px;
    position:relative;
    }

    .event {
    padding:5px;
    border:solid #d5d5d5;
    border-left:solid #aaa;
    border-width:1px 1px 1px 5px;
    position:absolute;
    max-width:600px;
    background:#fff;
    overflow:hidden;
    }
    div.event .title {
    font-size:1em;
    colo:#4B6EA9;
    }
    div.event .desc {
    font-size:0.8em;
    color:#7a7a7a;
    }
    #time {
    float:left;
    text-align:right;
    }
    div#time .timeline {
    height:60px;
    font-weight:bold;
    font-size:14px;
    color:#7a7a7a;
    }
    div#time div.timeline span {
    font-weight:normal;
    margin-left:7px;
    font-size:10px;
    color:#aaa;
    }
    div#time div.timeline .last{margin-top:35px;}
</style>

</head>
<body>

<div id="time">
<div class="timeline">9:00<span>AM</span></div>
<div class="timeline">10:00<span>AM</span></div>
<div class="timeline">11:00<span>AM</span></div>
<div class="timeline">12:00<span>PM</span></div>
<div class="timeline">1:00<span>PM</span></div>
<div class="timeline">2:00<span>PM</span></div>
<div class="timeline">3:00<span>PM</span></div>
<div class="timeline">4:00<span>PM</span></div>
<div class="timeline">5:00<span>PM</span></div>
<div class="timeline">6:00<span>PM</span></div>
<div class="timeline">7:00<span>PM</span></div>
<div class="timeline">8:00<span>PM</span><div class="last">9:00<span>PM</span></div></div>
</div>
<div id="canvas">
<div class="event" style="top: 30; left: 10; width: 584; height: 80;">test</div><div class="event" style="top: 610; left: 10; width: 284; height: 50;">test</div></div> </body></html>

【问题讨论】：

我们能看到 event 类的 CSS 吗？
用 css 更新了完整的 html 代码

标签： css doctype

【解决方案1】：

您没有在您的内联样式中指定任何单位。这将适用于 quirks 模式（无 doctype），但不适用于严格模式（有 doctype）。

<div class="event" style="top: 30px; left: 10px; width: 584px; height: 80px;">

应该修复它。

【讨论】：

是的..我只是想通了。谢谢。

【解决方案2】：

好的，我发现了问题。

代替

style="top: 30; left: 10; width: 584; height: 80;"

应该是

style="top: 30px; left: 10px; width: 584px; height: 80px;"

之前它之所以有效，是因为它没有使用严格的文档类型。

【讨论】：