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

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

此外，如果您有一个加载屏幕，我建议您使用某种简单的动画，因为它看起来不像页面已经死亡。

Answer 2

您已将right_side_header课程限制为763px，同时您的sales_ph_num课程也限制为110px。

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

只需设置与jsfiddle相同的值。 =））

Answer 3

解决方案：

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

如果你有两个div并排，一个div为内联，另一个为inline-block，你将div标签放在html的不同行上，添加了空格：

<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;
}

这会溢出，因为在内联和内联阻塞的div之间添加了额外的空格。

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

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

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

任何人都可以向我解释为什么会发生这种情况以及为什么它应该/不应该？

内容溢出div

3 个答案: