html的一个细节

html的一个细节

起因

今天那个多路线planner已经基本可以用了(还没有删除功能xp).然而我又发现了一个神奇的东西.

经过

样式基本如下

div.panel{
    
    
	white-space:nowrap;
}
div.wrapper{
    
    
	overflow-x:auto;overflow-y:hidden;
}
div.list{
    
    
	display:inline-block;overflow-y:auto;
}

html截取部分如下

	<div class="panel">
		<div class="wrapper">
			<div class="list"></div>
		</div>
	</div>

之后通过复制的方式向div.wrapper的末端添加一个相同的div.list,添加了几次之后,发现第一个和第二个之间有一个空缺,而后面之间都没有空缺,这让人很难受,F12看了Elements,还是没有看见东西.直到最后试着在console里document.querySelector("div.wrapper").childNodes.

结果

原来是因为我的html里面div.list的上下有两个\n,于是解析之后就出现两个#text值为\n,并且显示了出来,之前一直以为html里面的空格和换行都是不显示的,原来是自己观察的不够仔细.不过这真的挺麻烦的!不知以后是否还会遇到?