HTML/CSS 未知元素拉伸(stretch)页面

Question

我目前正在努力使一个旧网站响应。 http://www.risumfeldt.dk/

当我在宽度低于 980px 的视口(viewport)中查看它时，水平滚动被激活并且 html/body/container 保持在 980px。

我已经尝试在所有元素上强制使用 200px 内联宽度，但页面仍然被拉伸(stretch)，我不知所措。有谁能找出问题所在吗？

问题出在#fp-boxes 中的表格。在 Chrome 的视口(viewport)中进行测试，强制宽度不会在没有刷新的情况下更改页面宽度，然后将强制宽度重置为初始值。在 firefox 的 vievport 中一切正常。

Answer 1

快速浏览了该站点，存在一些问题。

问题 1 - 购物车设置了扩展页面的 margin-left(style.css 第 88 行)

.m-shoppingbasket {
  width: 295px;
  position: absolute;
  margin-left: 739px;
  top: 6px;
  background: #8bbeb7;
}

可能的解决方案 - 删除 margin-left 并替换为 float right 并相应调整

问题 2 - 特征框 (fp-boxes) 包含具有设置宽度的表格

            <td style="width: 334px; height: 201px;" valign="top">...</td>
            <td style="width: 334px;" valign="top">...</td>
            <td style="width: 334px;" valign="top">...</td>

解决方案 - 删除绝对宽度并选择响应式网格或只设置百分比。我会放弃并排显示三个盒子的表格...

您似乎还添加了媒体查询(style.css 第 733 行)

您还可以通过创建响应式图像类来解决此问题，以便特色宣传片根据表格的大小缩小

.img-responsive {
    display:block;
    max-width:100%;
    height:auto
}

问题 3 - 页脚文本容器设置为 1000 像素宽度(style.css 第 610 行)

.footer-container .footer {
  width: 1000px;
  height: 80px;
  margin: 0 auto;
  padding-top: 20px;
}

解决方案 - 删除宽度

可能还有一些其他问题，但这应该可以帮助您入门。