3

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

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

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

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

知道这里发生了什么吗？

提前致谢！

4

1 回答 1

0

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

伪元素很可能是Bootstrap 添加到类中的clearfix hack.row（参见mixin.less文件.clearfix和.make-rowmixins）。

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

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

于 2013-11-20T00:04:06.590 回答