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

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“，”字母间距:20‘t；“不能工作。有趣的是红色背景和中心对齐仍然有效。

<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 src="icon1.png">'+
                   '<img src="icon2.png">'+
               '</div>');

这将导致这个HTML

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

它不包含任何空间，因此letter-spacing: 20px;无法工作。

与直接用HTML编写的new line不同，new line被认为是空格。

如果您希望获得相同的结果，请将其更改为

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

Answer 2

这很奇怪，但我可以用这样一种很难的方式来解决它。

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

但是，如果我在css中设置了一个类，它就不能工作。真的很奇怪