仅在不提供 DTD 时应用样式答案

【问题标题】：Style only applied when not providing DTD仅在不提供 DTD 时应用样式
【发布时间】：2013-03-13 23:45:12
【问题描述】：

我正在尝试使用有效的文档类型，但如果我使用下面的带有 URL 的文档类型，则链接拒绝保持在 200 宽度表中分配的 #ffffff 文本颜色（并且）背景颜色会擦除所有通过两行（谷歌和雅虎链接）。注释掉 Doctype URL，它工作正常...任何人都可以对此有所了解>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01     Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test.com</title>
<style type="text/css">
td.off{background: #223C66}
td.on{background: #2d2dff}
</style>
<style>
a{text-decoration:none}
a:hover{text-decoration:underline}
</style>
</head>

<table width="600" align="center" style="border:10px solid black; border-collapse:collapse;" cellpadding="10" cellspacing="0">

<tr>
<td>

<table width="200" cellpadding="0" cellspacing="10" border="0">
<tr>
<td height="40" class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
<a href="http:\\www.google.com"><font color=#ffffff size=2 face=arial>valid google link</font></a>
</td>
</tr>

<tr>
<td height="40" class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
<a href="http://www.yahoo.com" target="_blank"><font color=#ffffff size=2 face=arial>valid yahoo link</font></a>
</td>
</tr>

</table>

</td>

<td style="border:1px solid black; border-collapse:collapse;" cellpadding="0" cellspacing="0">
<a href="http:\\www.msn.com">valid msn.com link</a>
<p>plain test - no link</p>
</td>
</tr>

</table>
</body>
</html>

【问题讨论】：

不相关的旁注，您是否仅限于 HTML 4.01？ HTML5 现在有了更简单的文档类型声明<!DOCTYPE html>。
实际发生了什么以及在哪些浏览器上？描述模糊不清，与我测试的浏览器中的行为不匹配。在 cmets 中，您指的是下划线。请编辑问题以描述问题。请指定您是指初始行为还是鼠标悬停时发生的事情。如果是前者，为什么演示包含用于鼠标悬停效果的 CSS 和 JavaScript？
@Jukka，感谢您的帮助。我只在 IE8 中测试。如果没有 dtd url 代码（在 //EN" 之后），仅使用 doctype 的第一部分（包括结尾 >），当悬停时，左侧 td 链接（google 和 yahoo）显示带有白色下划线，并且单元格背景颜色切换颜色。此外，在 (2) 表格数据单元格（google 和 yahoo 链接单元格）之间可以看到背景表格颜色。msn 链接在悬停时显示正常的蓝色下划线，没关系。添加其余部分时在 doctype url 中，白色的下划线以蓝色结束，而 td 单元格的颜色会被洗掉。
@Jukka，我不知道哪个部分是java，我以为我只有css。我一直在拼凑这段代码，还没有学到足够的东西。这是 doctype 的问题，有无第二部分（url）。我能找到的唯一区别是没有网址。这很有趣，因为如果有的话，它应该切换到没有 url 的怪癖，而不是相反。 PS，我已经修改以删除每个 w3 验证器的所有错误，但它仍然无法正常工作。我很困惑...感谢您提出的任何建议... kevans
您还没有根据您的 cmets 编辑问题来描述实际问题。此外，代码一团糟，最好重写而不是固定。

标签： html css styles doctype

【解决方案1】：

您需要确保所有属性值都包含在" 引号中才能有效。

例如：

<font color="#ffffff" size="2" face="arial">

此外，在您的标记上使用验证工具是一种很好的做法：W3C Markup Validation Service http://validator.w3.org/check

已添加：带有适当标记的完整版本，应验证为 HTML 4.01 过渡版

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>test.com</title>
        <style type="text/css">
            td.off {
                background: #223C66;
            }
            td.on {
                background: #2d2dff;
            }
            a {
                text-decoration:none;
            }
            a:hover {
                text-decoration:underline;
            }
        </style>
    </head>
    <body>
        <table width="600" align="center" style="border:10px solid black; border-collapse:collapse;">
            <tr>
                <td>
                    <table width="200" border="0">
                        <tr>
                             <td height="40" class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
                                 <a href="http://www.google.com"><font color="#ffffff" size="2" face="arial">valid google link</font></a>
                             </td>
                        </tr>
                        <tr>
                             <td height="40" class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
                                 <a href="http://www.yahoo.com" target="_blank"><font color="#ffffff" size="2" face="arial">valid yahoo link</font></a>
                             </td>
                        </tr>
                    </table>
              </td>
              <td style="border:1px solid black; border-collapse:collapse;" >
                  <a href="http://www.msn.com">valid msn.com link</a>
                  <p>plain test - no link</p>
               </td>
            </tr>
        </table>
    </body>
</html>

【讨论】：

感谢 Konrad，我刚刚添加了引号，仍然无法正常工作。拿下代码，保存，打开看看。然后取出 doctype url ......然后它看起来就像我正在尝试做的......添加评论......是的，我需要使用 4.01 过渡来完成这项工作，因为它大部分都是较旧的 html 编码，非常小CSS...
对不起，甜淀粉酶，那是你建议的引号......没听懂......我希望是这样......
@kevans 我根据您的标记将它放在测试页上：jsfiddle.net/XBzKd 另外，验证器说cellspacing 和cellpadding 不是有效的HTML4.0 属性。因此，最好将所有样式移至 CSS，而不是使用元素属性。
@sweetamylase...我还没到“那里”，试试没有 dtd url，看看它有什么作用，但是是的，我会接受你的建议，只是不够完整。如果我取出整个文档类型，它会起作用。同样，这几乎都没有 css，只是直接的“记事本”html。
对不起，链接下划线不会保留分配的（继承的）链接 ffffff 颜色。相反，它们采用默认的 IE8 颜色。取出dtd url，然后下划线保持颜色。