浏览器对 HTML 渲染,一个很有趣的问题 - V2EX

首页注册登录

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

PageSpeed 相关文档

› 为 NGINX 编译 PageSpeed 支持

› ngx_pagespeed

› Configuring mod_pagespeed Filters

加载性能测试工具

› WebPagetest

› Gomez

这是一个创建于 3635 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天遇到一个有趣问题, 两段一模一样的代码, 第一段有缩进, 第二段没有(用 js 处理后 append 到 html 页面), 浏览器渲染出来的效果居然不一样, 用 chrome devlop tools 排查了很久才发现这个问题, 然后将第二段代码缩进之后就恢复正常了, 有没有遇到我这样的问题最终找到原因的?

7 条回复 • 2016-03-04 10:34:04 +08:00

1

hupeng

2016 年 3 月 3 日

居然不一样？本来就是不一样的。。。

2

lyning

OP

2016 年 3 月 3 日

@hupeng 一模一样的, 最后用 devlop tools 编辑 html 手动换行渲染效果就正常了

3

otakustay

2016 年 3 月 3 日

1

缩进就是空格啊，空格是 TextNode 啊，所以 2 个页面是不一样的啊……

4

lyning

OP

2016 年 3 月 3 日

@otakustay 原来时这样子哒, 我用 js 在组装 html 的时候每一个 tr 或者 li 前面都加上\t 或者 \r ,然后就达到我想要的效果了

5

justjavac

2016 年 3 月 3 日 via Android

为什么用“居然”？

6

lyning

OP

2016 年 3 月 4 日

@justjavac 因为之前代码都是做了缩进才来做样式的, 现在才知道缩进之后布局会发生细微的变化,就是因为每个容器和布局之后多了空格

7

lyning

OP

2016 年 3 月 4 日

@otakustay 太谢谢你了, 又学到东西了

关于 · 帮助文档 · 自助推广系统 · 博客 · API · FAQ · Solana · 726 人在线 最高记录 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 34ms · UTC 20:59 · PVG 04:59 · LAX 12:59 · JFK 15:59
♥ Do have faith in what you're doing.