html - 没有应用 CSS，可能是因为字符没有被转义？

我需要澄清一下:我已经在这个问题上停留了一个小时了，因为我不确定问题出在哪里。我在 jsbin.com 上也粘贴了一个完整的示例。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <table width="100%">
        <tr>
            <td class="darkstyle" style="width: 15%;">
                <div>URI</div>
            </td>
            <td class="lightstyle" style="width: 85%;">someurl</td>
        </tr>
        <tr>
            <td class="darkstyle" style="width: 15%;">
                <div>Confidence</div>
            </td>
            <td class="lightstyle" style="width: 85%;">Low</td>
        </tr>
        <tr>
            <td class="darkstyle" style="width: 15%;">
                <div>Attack</div>
            </td>
            <td class="lightstyle" style="width: 85%;">Cookies set from a subdomain like app.foo.bar are transmitted only to that domain by the browser. However, cookies scoped to a parent-level domain may be transmitted to the parent, or any subdomain of the parent.</td>
        </tr>
        <tr>
            <td class="darkstyle" style="width: 15%; word-wrap: break-word;">
                <div>OtherInfo</div>
            </td>
            <td class="lightstyle" style="width: 85%;">
                <div>aaaThe origin domain used for comparison was: &#13;
myurl.ca&#13;
DERPCOOKIE=&amp;quot;&amp;quot;&#13;
COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5&#13;
MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3&#13;
MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34&#13;
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

编辑:

CSS

.lightstylediv{
  color: #000;
  font-weight: bold;
}
.lightstyle{
  vertical-align: text-top; 
  background:#b3b3b3;
}

darkstyle是一样的东西，只是颜色不同而已。

如果您删除包含 <div>aaaThe or 的 div 中的所有内容然后一切正常。

&quot;&quot;显示为 &quot而不是 "，我该如何解决这个问题？

只是回车，所以应该不会影响它。

但是字符串很长，它们可能是它破坏表格的原因 width ？

最佳答案

这个很简单，

你需要将table-layout:fixed设置为table
您在错误的 td 上应用了 break-word
避免使用内联样式
我会猜测并认为您是在 vertical-align:top 而不是 text-top 之后

片段

table {
  table-layout: fixed;
  width: 100%
}
.darkstyle {
  color: #000;
  font-weight: 700;
  width: 15%;
  vertical-align: top;
}
.lightstyle {
  background: #b3b3b3;
  width: 85%;
  word-wrap: break-word
}

<table>
  <tr>
    <td class="darkstyle">
      URI
    </td>
    <td class="lightstyle">someurl</td>
  </tr>
  <tr>
    <td class="darkstyle">
      Confidence
    </td>
    <td class="lightstyle">Low</td>
  </tr>
  <tr>
    <td class="darkstyle">
      Attack
    </td>
    <td class="lightstyle">Cookies set from a subdomain like app.foo.bar are transmitted only to that domain by the browser. However, cookies scoped to a parent-level domain may be transmitted to the parent, or any subdomain of the parent.</td>
  </tr>
  <tr>
    <td class="darkstyle">
      OtherInfo
    </td>
    <td class="lightstyle">
      The origin domain used for comparison was: &#13; myurl.ca&#13; DERPCOOKIE=&amp;quot;&amp;quot;&#13; COOKIE3=ASDASD-97867867848-uPKyGldjZwWptQWPkC2wgZ0yW5cCx9ePuVoJjVxyJlrsV1BRT5&#13; MORECOOKIE_GOODIES=N98R4398R7Y3BF78645389M4D4M37645D348RSJM3645SDN83TY74SWM457R35MYRS3M4875UR3,S4MR34MYRS834JRYMS3784R3487R3M4RM378R34RM,3&#13;
      MORECOOKIE_GOODIESB=894FH34897RFH32948FJ3489RFH3478FGH3289RH234F68Y3GH7948RFH3DFC8734HRF938FH39408RJ394FHJ349FH34&#13;
    </td>
  </tr>
</table>

关于html - 没有应用 CSS，可能是因为字符没有被转义？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35713128/

html - 没有应用 CSS，可能是因为字符没有被转义？

代码

CSS

片段

上一篇：javascript - 如何测试跨平台应用程序

下一篇：html - 似乎无法移动元素