0

解决了：

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

这是一些headercss的代码：

.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_barcss的代码：

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_bodyCSS：

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

感谢您的任何帮助。

4

3 回答 3

0

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

另外，如果您有一个加载屏幕，我建议您使用一些简单的动画，这样它看起来就不会像页面已经死了。

于 2012-12-21T21:23:02.047 回答
0

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

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

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

于 2012-12-21T21:23:57.970 回答
0

解决方案：

好的，这个问题困扰了我一段时间，我不明白为什么会这样。我注意到 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;
}

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

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

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

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

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

于 2012-12-23T19:00:01.700 回答