Question

我正面临IE问题，我找不到合适的解决方案。

比较Chrome和IE我发现添加padding-right将从Chrome中的内容宽度和IE中的部分宽度中排除。

是否有适当的解决方法，或者我应该在这里使用浏览器特定的风格？

如果解释不够好，请查看下面提供的摘录。

.container {
  width: 480px;
  height: 100px;
  border: 1px solid black;
  padding-right: 20px;
  overflow: auto;
  background: red;
}

.content {
  display: inline-block;
  white-space: nowrap;
  height: 100%;
  background: blue;
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  background: white;
}

<div class="container">
  <div class="content">
    <div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div><div class="item">
    </div>
  </div>
</div>

Answer 1

比较Chrome和IE我发现添加填充权限将从Chrome中的内容宽度和IE中的部分宽度中排除。

这是在Quirks模式下显示页面时渲染的主要区别的经典描述。

您可以通过确保页面是有效的HTML（即，它包含所有正确的<html><head>...</head><body>...</body></html>标记）来修复渲染模式，并以有效的DOCTYPE声明开头（您可以使用多种文档类型）但最简单的只是<!DOCTYPE html>）。

进行这些修复，您会发现IE渲染的填充与Chrome完全相同。

IE：水平滚动填充

1 个答案: