html - 内容溢出 div

Question

已解决:

我有a demo它适用于 jsFiddle，但同样的不适用于 other site .您将看到 .right_side_header class 溢出到下一行，它位于 main_container-->header--->class 下。为什么会这样？它是 763 像素，我已经仔细检查了每个框的像素，但它溢出了。有人可以告诉我为什么吗？如果您检查该元素，并取消选中 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;。

此外，如果您有一个加载屏幕，我建议您使用某种简单的动画，这样页面看起来就不会死掉。