IE 8 和填充问题
我对 IE 8 填充设置有疑问。如果您查看我的网站 mywebsite，您会看到中间部分（从菜单栏下方开始）比其他部分更宽，使该网站不成比例。这是由于我应用于此 div 元素的填充设置。您可以在 h2 元素中看到同样的问题 - 例如“Flat share”：栗色背景扩展到元素区域之外，该区域终止于右侧白色三角形的边缘。有谁知道如何解决这个问题？它只发生在 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;
}
UPDATE 的摘录：我遵循 Matthew 的建议，决定不明确定义宽度和高度。瞧，问题解决了。谢谢大家的回复。
I have issue with IE 8 padding setting. If you look at my web site mywebsite, you'll see the middle part(starting just below the menu bar) is wider than the rest and making the site out of proportion. It is due to padding setting that I applies to this div element. You can see the same problem in h2 elements - such as "Flat share": the maroon color background expands beyond the element's area which ends at the edge of white triangle on the right side. Does anyone know how to resolve this?It only happens in IE 8;works fine in IE 7 and firefox.
Here's excerpt of my 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;
}
UPDATE : I follow Matthew's suggestion and decided not to define width and height explicitly. Voila, problem solved. Thanks guys for all replies.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
问题是你在主 div 上有一个内联样式，它包含了 1000px 的所有内容。其中的每个元素都具有相同的宽度。这不适用于您所遇到的所有浏览器。尝试在内部 div 上使用宽度百分比，例如 95%（这个数字只是一个猜测......这取决于您的边距/填充有多大）。
出现这种情况的原因是所有 div 以及主 div 中的边距和填充都被考虑在内。您正在尝试将一个 div 放入具有相同宽度的 div 中。两个 div 都有默认的边距/填充。此外，您还明确声明了一些具有意外应用行为的填充。
The issue is that you have a inline style on the main div that holds everything that says its a 1000px. Every element within it has this same width. This will not work in all browsers as you are experiencing. Try using percentages for width on the inner divs like 95% (this number is just a guess ... it will depend on how big your margins/padding is).
The reason this is the case is that margins and padding are being factored into all your divs as well as for the main div. You are attempting to fit a div inside a div with the same width. Both the divs have default margins/paddings. In addition, you have explicitly declared some padding which is having a unexpected applied behavior.
您可能必须使用条件语句来抵消填充问题而不影响其他浏览器。这是使用reset.css 文件的主要原因，但在这么晚的阶段实施重置无疑会带来更多的麻烦。
这是众多解决方案中的一个可能的解决方案，但它会起作用。
You may have to use a conditional statement to offset the padding issue without affecting other browsers. This is the main reason reset.css files are used, but implementing a reset at this late a stage will no-doubt bring more trouble than it's worth.
This is a possible solution out of many, but it will work.
您可以像 Daniel 所说的那样使用不同的样式表来处理这个问题，尽管您需要指定“If IE 8”。像这样的
OR，你可以做我遇到这个问题时总是做的事情，只需从div的总宽度中减去填充即可。 （这是一个一直对我有用的作弊）。例如，如果 DIV 宽 200 像素，并且内容需要在左侧填充 20 像素。我会设置左侧和右侧的填充。假设左边 20 像素，右边 20 像素。总共 40 个。因此，将 DIV 宽度设置为 160px。希望这会有所帮助！
You can deal with this using a different style sheet like Daniel says, although you will want to specify "If IE 8". Like such
OR, you can do what I always do when I run into this problem and just MINUS the padding from the total width of the div. (its a cheat that has always worked for me). So for example, if the DIV is 200px wide, and the content needs 20px padding on left. I would set the padding for the left and right. So lets say you have 20px left and 20px right. That totals 40. So set your DIV width 160px.Hope this helps!