为什么 chrome 会放大空对象标签?

发布时间:2021-03-07 09:54

因此,我刚刚修复了我网站上的一个错误 - chrome 将空 s 放大到 300x150px,而 Firefox 没有。我做了一个最小的页面来演示差异:https://riedler.wien/test/chrobject.html (archived)。我也可以根据要求发布屏幕截图,但我假设每个 webdev 都安装了。

object{
  background-color:#Fa0;
}
<a>Test</a>
<object></object>
<a>Toast</a>
<object>saas</object>

我找不到任何关于这是预期行为的信息,但我也找不到关于此的错误报告。请注意,我还没有测试其他浏览器的行为,但由于几乎所有浏览器都基于 cromium,我假设它们与 chrome 共享它们的行为。此外,chrome 和 firefox 的移动版本与桌面版本的行为相同。

这是 Firefox 或 Chrome 的缺点吗?

回答1

这只是浏览器的默认设置。在构建网站时,通常最好使用以下命令清除所有格式:

* {
    
}

或者将其全部重置为一些合理的默认值:

* {
    all: initial
}

在文件的开头执行此操作。这将确保每个浏览器的格式一致。

这并不是任一浏览器的真正缺点,而是一种妥协,因为有些网站需要这个,有些则不需要。但一般来说,firefox 的做法是最好的方法。最后,您会希望它在 chrome 上运行得最好,因为几乎每个浏览器都基于它并且拥有最大的用户群。