html - IE 8 和填充问题

Question

我对 IE 8 填充设置有疑问。如果你看我的网站mywebsite ，您会看到中间部分(从菜单栏正下方开始)比其余部分宽，使网站不成比例。这是由于我将填充设置应用于此 div 元素。您可以在 h2 元素中看到相同的问题 - 例如“Flat share”:栗色背景扩展到元素区域之外，该区域终止于右侧白色三 Angular 形的边缘。有谁知道如何解决这个问题？它只发生在 IE 8 中；在 IE 7 和 Firefox 中工作正常。 这是我的 CSS 的摘录

#page {
width: 1000px;
margin: 0px auto;
padding: 20px 5px;
background: #FFFFFF;
}

.sidebar li h2 {
height: 40px;
width: 220px;
margin: 0 0 0 0;
padding: 10px 15px 0px 15px;
background: #890208 url('../images/img05.jpg') no-repeat left top;
letter-spacing: -1px;
font-size: 16px;
color: #FFFFFF;
}

更新:我听从了 Matthew 的建议，决定不明确定义宽度和高度。瞧，问题解决了。感谢大家的回复。

Answer 1

问题是您在主 div 上有一个内联样式，它包含所有显示为 1000 像素的内容。其中的每个元素都具有相同的宽度。正如您所体验的那样，这不适用于所有浏览器。尝试在内部 div 上使用宽度百分比，例如 95%(这个数字只是一个猜测……这将取决于您的边距/填充有多大)。

出现这种情况的原因是边距和填充被考虑到所有 div 以及主 div 中。您正试图将一个 div 放入具有相同宽度的 div 中。两个 div 都有默认的边距/填充。此外，您已经明确声明了一些具有意外应用行为的填充。