为什么我每次添加“
[英]Why does my CSS stop working whenever I add “<!DOCTYPE html…”
问题描述
I had some code that produced a table, and worked perfectly. 
我有一些代码可以生成一个表，并且运行良好。
This is the code: 这是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table>
<tr class="d0"><th>SCHED DATE<th>AMOUNT
<tr class="d0"><td style="text-align: left;">Aug 1, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d1"><td style="text-align: left;">Jul 27, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d0"><td style="text-align: left;">Jul 20, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr><td>Total:</td><td style="{border-top: grey thin solid; text-align: right;}">$300</td>
</table>
</body>
</html>
Then I added a line so that I could pass html validation at validator.w3.org 然后我添加了一行，以便我可以通过validator.w3.org上的html验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
but that broke my CSS, the right format is gone, and my total line is gone 但这破坏了我的CSS，正确的格式消失了，我的总行消失了
How can I fix that? 我该如何解决？
4 个解决方案
解决方案1
7 已采纳 2011-08-07 15:05:18
The following portion of your code looks strange : 您的代码的以下部分看起来很奇怪：
<td style="{border-top: grey thin solid; text-align: right;}">
The {} arround the style's values doesn't seem quite standard (and as you specified, with the doctype declaration, that you want the browser to interpret your code using a well-defined standard...) {}环绕样式的值似乎不太标准（并且，如您所指定的，使用doctype声明，您希望浏览器使用定义良好的标准来解释代码...）
You should probably remove those {} , and use something like this -- which looks a bit more standard-compliant : 您可能应该删除那些{} ，并使用类似这样的东西-看起来更符合标准：
<td style="border-top: grey thin solid; text-align: right;">
Also, as noted by @cthulhu , you are opening <tr> and <th> tags, but never closing them : 另外，正如@cthulhu指出的那样 ，您正在打开<tr>和<th>标记，但是从不关闭它们：
- there is an opening
<tr>at the beginning of each of the following lines (and others) :以下各行（及其他各行）的开头都有一个开头<tr>： - and you have two opening
<th>tags on the first line :并且在第一行上有两个打开的<th>标签：
<tr class="d0"><th>SCHED DATE<th>AMOUNT
<tr class="d0"><td style="text-align: left;">Aug 1, 2011</a></td><td style="text-align: right;">$100</a></td>
<tr class="d1"><td style="text-align: left;">Jul 27, 2011</a></td><td style="text-align: right;">$100</a></td>
You should add closing </th> and </tr> tags where needed : 您应该在需要的地方添加</th>和</tr>标记：
<tr class="d0">
<th>SCHED DATE</th>
<th>AMOUNT</th>
</tr>
<tr class="d0">
<td style="text-align: left;">Aug 1, 2011</a></td>
<td style="text-align: right;">$100</a></td>
</tr>
<tr class="d1">
<td style="text-align: left;">Jul 27, 2011</a></td>
<td style="text-align: right;">$100</a></td>
</tr>
解决方案2
1 2011-08-07 15:07:21
This breaks your css: {border-top: grey thin solid; text-align: right;} 这会打断您的CSS： {border-top: grey thin solid; text-align: right;} {border-top: grey thin solid; text-align: right;}
Remove the surrounding {} and it should be ok again. 删除周围的{} ，应该可以了。
解决方案3
1 2011-08-07 15:08:17
- Change You first row to
<tr><th>SCHED DATE</th><th>AMOUNT</th></tr>.将您的第一行更改为<tr><th>SCHED DATE</th><th>AMOUNT</th></tr>。 - Remove the
{ ... }in your style on the bottom row.在底部的一行中删除您的样式中的{ ... }。
解决方案4
0 2011-08-07 15:06:09
You have broken HTML for the first row which contains the header. 您已经破坏了包含标题的第一行的HTML。 It should be: 它应该是：
<tr><th>SCHED DATE AMOUNT</th></tr>
Broken HTML probably cause the browser to "skip" rendering things and break the design. 损坏的HTML可能会导致浏览器“跳过”渲染内容并破坏设计。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.