样式仅在不提供DTD时应用

时间:2013-03-13 23:45:12

标签: html css styles doctype

我正在尝试使用有效的doctype,但如果我使用下面的URL,则链接拒绝维护在200宽度表(和)背景颜色处分配的#ffffff文本颜色擦除所有两行(谷歌和雅虎链接)。注释掉Doctype网址,它运行正常......任何人都可以对此有所了解>

<!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>

1 个答案:

答案 0 :(得分:4)

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

例如:

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

此外,最好在您的标记上使用验证工具:W3C Markup Validation Service http://validator.w3.org/check

已添加:包含正确标记的完整版应验证为HTML 4.01 Transitional

<!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>