100％宽度无法在IE或Chrome中使用

Question

我有一个让我疯狂的网站。具体来说，我在页面的最顶部有一个曲线图像，我想调整大小以便始终填充屏幕的宽度。

这在Firefox和Opera中效果很好，但我似乎无法在IE或Chrome中使用它。

我通过类将以下CSS应用于图像：

img.top{
  width: 100%;
  width: 100vw;
  height: 35px;
  top: 10;
  left: 0;
}

但即使使用100vw使用视图窗口，图像也会使用我的显示器的显示宽度，而不是浏览器的宽度。使用IE 11，FF 51.0.1和Opera 43.0.2442进行测试

您可以在http://stats-jf.fin.gov.nt.ca/

找到该网站

要提供一个最小的可验证页面... http://stats-jf.fin.gov.nt.ca/index2.html几乎所有代码都被删除，除了曲线和一些其他元素以显示影响。 “正常工作”曲线应适合浏览器窗口宽度为998px，“测试页面”应始终保持在Bear徽标下方。

非常感谢任何帮助。

Answer 1

您需要将以下内容添加到包含的表中：

<table width="100%" style="border-spacing: 0px;">

并删除宽度：100vw;从你的形象：

img.top{
  width: 100%;  
  height: 35px;  
  top: 10px;  
  left: 0;
}

你也忘记在top：property中声明你正在使用的单位。我已将其设置为10px。

Answer 2

根据安东尼的建议，我把曲线移到了自己的曲线上，这解决了最初的问题，但创造了一个新问题。

下表没有在所有浏览器中拉伸到全宽，因为它的宽度=＆＃34; 100％＆＃34;和样式属性...但在样式中没有宽度属性。只要我将宽度：100％添加到表的样式中......问题就在所有浏览器中得到解决。

请注意将旧的html样式与新的混合......这样做可能会产生不寻常的结果。

我知道，我正在向合唱团讲道！