为什么 html 页面的正文在 Edge 和 IE 中没有扩展到全宽，但对于所有其他浏览器都可以？

Question

我有一个 webpage 正在开发中。让我们忘记内容。这无关紧要。它在 Chrome、Safari 和 Firefox 中看起来不错，但在 Edge 或 Internet Explorer 中不会扩展到全宽。

如果我在他们的控制台上写（在 jQuery 的帮助下）

$('body').width($(window).width())

正文扩展到全屏宽度，再次正常。我一直在尝试通过控制台调试页面，但一直没有找到原因。

参考页面的

DOM 作为来源。

只有当屏幕宽度超过 990（由于我使用的媒体查询）时才会发生这种情况。

Answer 1

应用于您的 html 元素的 CSS 选择器 .svg 告诉它是带有 display: inline-block; 的内联元素。如果您从 .svg 中删除 display 属性或将值更改为 block 页面将适当地填充浏览器视口。

有问题的 CSS 选择器。

.svg {
  display: inline-block; /* <= the problem */
  background: 0 0;
  border: none;
}

据我所知，您正在使用 Modernizr 进行一些特征检测，并将 .svg class 添加到 html，然后您创建自己的 .svg出于某些其他目的不知道 Modernizr 将 .svg 添加到 html.

如果以上为真，则 change/rename/override CSS 选择器。如果 changed/renamed 更新最初使用 .svg 的元素。

Why body of html page does not extend to full width in Edge and IE but is ok for all other browsers?