内容溢出 div

Question

已解决：

我有 a demo 可以在 jsFiddle 上运行，但同一个在 other site 上不起作用。您将看到.right_side_header class 溢出到下一行，即main_container-->header--->class 下方。为什么会这样？它是 763px，我已经仔细检查了每个框的像素，但它溢出了。有人可以告诉我为什么吗？如果您检查元素，并取消选中 763px 的宽度，它不会溢出。

这是一些header css 的代码：

.header {
   display: block;
   padding-top: 33px;
   padding-left: 30px;
   padding-right: 30px;
   margin-left:auto;
   margin-right:auto;
   width: 900px;
}

.right_side_header {
   display: inline-block;
   vertical-align: top;
   padding-top: 35px;
   width: 763px;
}

img.globe {
   display: inline;
}

#globe-logo {
   display: inline;
   position: relative;
   z-index: 9000;
}

span.letter_logo {
   font-family: HelveticaBlack;
   font-size: 41px;
   height: 41px;
   line-height: 1;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   text-shadow: 1px 1px 0px rgba(245, 245, 245, 0.35), -1px -1px 0px rgba(245, 245, 245, 0.35);
}

div.letter_logo_container {
   text-align: center;
   display: block;
   line-height: 1;
   width: 621px;
}

这是nav_bar css 的代码：

div.nav_phone {
   height: 18px;
   padding-top: 3px;
   width: 621px;
   display: inline-block;
}

span.sales_ph_num {
   font-family: HelveticaItalic;
   font-size: 11.5px;
   color: #c10d24;
   text-shadow: 1px 1px 0px rgba(245, 235, 236, 0.4), -1px -1px 0px rgba(245, 235, 236, 0.4);
}

div.sales_ph_num {
   text-align: center;
   display: inline-block;
   vertical-align: top;
   width: 110px;
}


.nav_bar {
   background-image: url("132/nav_bar.png");
   background-repeat: no-repeat;
   height: 18px;
   width: 621px;
   position: relative;
}

div#links {
   line-height: 1;
   position: absolute;
   top: 50%;
   left: 119px;
   margin: -6px auto 0 auto;
   font: 12px HelveticaMedium;
   text-align: center;
   text-shadow: 1px 1px 0px rgba(237, 237, 237, 0.5), -1px -1px 0px rgba(237, 237, 237, 0.5);
}

#Products {
   margin-left: 36px;
}

#Terms, #Terms_Nav {
   margin-left: 36px;
}

a.Terms, a.Terms:visited, #Home a, #Home a:visited, a#About, a#About:visited,
#About a, #About a:visited {
   text-decoration: none;
   color: #000000;
   cursor:pointer;
}

li#line_break {
   margin-top: 12px;
}

#About {
   text-decoration: none;
   color: #000000;
   margin-left: 36px;
   margin-right: 35px;
}

这是main_body css：

html, body {
   width: 100%;
   height: 100%;
   background-color: #fafafa;
   -webkit-overflow-scrolling: touch;
   position: relative;
   overflow-x: hidden;
}

.main_container {
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff;
   -webkit-border-radius: 8px 8px 8px 8px;
   -moz-border-radius: 8px 8px 8px 8px;
   -o-border-radius: 8px 8px 8px 8px;
   border-radius: 8px 8px 8px 8px;
   position: absolute;
   left: -9999em;
}

还有一个可以重置的css：

* {
   margin: 0;
   padding: 0;
}

感谢您的帮助。

Answer 1

从div.ad_banner 中删除top: -61px;。

此外，如果您有一个加载屏幕，我建议您制作一些简单的动画，以免页面看起来像死了。

Answer 2

您已将 right_side_header 类限制为 763 像素，您的 sales_ph_num 类也限制为 110 像素。

但是在 jsfiddle 上你已经分别设置了 900px 和 137px。

只需像在 jsfiddle 上一样设置相同的值。 =))

Answer 3

解决方案：

好的，这个问题困扰了我一段时间，我不明白为什么会这样。我注意到 sales_ph_num div 和 nav_bar div 之间有一些额外的 1 或 2 像素的空白，不应该有。然后我看到我正在使用 inline-block，在 SO 上搜索 inline-block 和未计算的空白，然后就可以了。我使用了带有 2 或 3 个 div 的内联块，它添加了额外的空格，这使得内容溢出，因为每个框都有一个宽度。

如果你有两个并排的 div，一个 div 作为内联，另一个作为内联块，并且你将 html 中的 div 标签放在不同的行上，则会添加空格：

<div class="container_1000px">
    <div class="container">
        My content.
    </div>
    <div class="next_container">
        Next content.
    </div>
</div>

.container_1000px
{
    width: 1000px;
}
.container
{ 
    display: inline;
    width:960px;
}
.next_container
{
    display: inline-block
    width: 40px;
}

这会溢出，因为在 inline 和 inline-blocked div 之间添加了额外的空格。

解决方案是将每个 div 放在一行上。

<div class="container_1000px"><div class="container">My content.</div><div class="next_container">Next content.</div></div>

并且不会添加额外的空格。再次感谢。

谁能向我解释为什么会发生这种情况以及为什么应该/不应该？