WebKit/Blink 渲染文档不好答案

【问题标题】：WebKit / Blink rendering document badlyWebKit/Blink 渲染文档不好
【发布时间】：2013-11-20 08:11:24
【问题描述】：

我目前正在开发一个使用 Twitter 的 Bootstrap 3 的网站。该网站在 Firefox 上呈现正常，但在 Chrome/Opera/Safri（基本上是使用 WebKit 或 Blink 作为布局引擎的浏览器）上存在一些奇怪的填充或空格，和 CSS 伪元素，如 ":before" 和 ":after" 分布在整个文档中。另外，body 上还添加了“style”属性。

以 WebKit / Blink 为例： http://i.stack.imgur.com/6jdMe.png

在 Gecko 上： http://i.imgur.com/wyK7VC5.png

我过去处理过 WebKit 处理错误的带有 BOM 的 UTF8，但情况并非如此，因为所有文件都以没有 BOM 的 UTF8 编码。

知道这里发生了什么吗？

提前致谢！

【问题讨论】：

这些天 Bootstrap 是怎么回事？我在使用引导程序的网站上遇到了问题。
我其实更喜欢 Zurb 的 Foundation，但是这个客户坚持使用 Bootstrap。

标签： html css twitter-bootstrap webkit blink

【解决方案1】：

伪元素的可见性（例如:before 和:after）元素是最新版Chrome 中的新增功能，使调试更容易。这些伪元素也存在于 Firefox 中，只是不会出现在 DOM 检查器中。

伪元素可能是 clearfix hack，Bootstrap 添加到 .row 类（请参阅 mixin.less 文件以了解 .clearfix 和 .make-row 混合）。

至于<body> 上的style 属性，它是空的，不影响任何东西。我找不到任何关于 Chrome 为何这样做的具体参考资料，但 Chrome 似乎在 DOM 检查器的每个页面上都添加了它。

填充/空间问题是否在页面上实际可见，还是仅在 DOM 检查器中可见？

【讨论】：

是的，有一些视觉上的不一致，例如：Webkit / Blink -> i.imgur.com/8CWs8Nt.png Gecko -> i.imgur.com/V8xaK1X.png
这可能与特定的 CSS 有关，我无法仅根据图像进行调试。我建议发布另一个问题，其中包含一些样式和网站链接或独立 html 和样式的Codepen。
我会看看我的 CSS，看看我能做什么。非常感谢！