css 当页面由 document.write 呈现时字母间距不起作用

Question

下面的代码按我的预期工作。每件事都是完美的造型。

<style>
   .letter-spacing{
      width: 400px;
      background: red;
      text-align: center;
      letter-spacing: 20px;
    }
</style>

<div class="letter-spacing">
   <img src="icon1.png">
   <img src="icon2.png">
</div>

但是，如果我使用 document.write 渲染 "div"，"letter-spacing: 20px;" 将不起作用。有趣的是红色背景和中心对齐仍然有效。

<style>
   .letter-spacing{
      width: 400px;
      background: red;
      text-align: center;
      letter-spacing: 20px;
    }
</style>

<script>
    document.write('<div class="letter-spacing">'+
                       '<img src="icon1.png">'+
                       '<img src="icon2.png">'+
                   '</div>');
</script>

有没有人知道为什么？

Answer 1

这很奇怪，但我可以像这样用一些困难的方法修复它

document.write('<div class="letter-spacing"> '+
               '<img style="margin-right: 20px;" src="icon1">'+
                   '<img src="icon2">'+
               '</div>');

但是如果我在 css 中设置 class 它不起作用。真是奇怪

Answer 2

因为你这样写

document.write('<div class="letter-spacing">'+
                   '<img src="icon1.png">'+
                   '<img src="icon2.png">'+
               '</div>');

这将导致这个 HTML

<div class="letter-spacing"><img src="icon1.png"><img src="icon2.png"></div>

不包含任何 space，因此 letter-spacing: 20px; 不工作。

与直接在HTML中写的new line不同，后者被认为是space。

如果你想得到相同的结果，就改成这样

document.write('<div class="letter-spacing">'+
                   '<img src="icon1.png"> '+    // Note the space before '
                   '<img src="icon2.png">'+
               '</div>');

css 当页面由 document.write 呈现时字母间距不起作用

css letter spacing doesn't work when the page was rendered by document.write

css

document.write

letter-spacing