css 当页面由 document.write 呈现时字母间距不起作用
css letter spacing doesn't work when the page was rendered by document.write
下面的代码按我的预期工作。每件事都是完美的造型。
<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>
有没有人知道为什么?
这很奇怪,但我可以像这样用一些困难的方法修复它
document.write('<div class="letter-spacing"> '+
'<img style="margin-right: 20px;" src="icon1">'+
'<img src="icon2">'+
'</div>');
但是如果我在 css 中设置 class 它不起作用。真是奇怪
因为你这样写
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>');
下面的代码按我的预期工作。每件事都是完美的造型。
<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>
有没有人知道为什么?
这很奇怪,但我可以像这样用一些困难的方法修复它
document.write('<div class="letter-spacing"> '+
'<img style="margin-right: 20px;" src="icon1">'+
'<img src="icon2">'+
'</div>');
但是如果我在 css 中设置 class 它不起作用。真是奇怪
因为你这样写
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>');