javascript - IE7 使用 Javascript 选项卡导航误读页面上的 CSS

Question

我正在构建一个 Drupal 电子商务网站，在该网站上，产品页面将在产品图像下的不同选项卡下提供不同的信息。我遇到了 IE7 如何处理这个问题。呈现页面时，页脚位于一个位置，但当单击不同的选项卡时，页脚的一部分仍保留在原来的位置，即使页面的其余部分长度发生变化。当内容比初始选项卡长时，这会给选项卡带来问题。一天半以来我一直在反对这个，所以我想我会对它有一些新的看法。这是我重新创建问题的页面的链接。

http://dev.jsfix.gotpantheon.com/node/1/

单击 IE7 或任何兼容性测试器中的规格选项卡应该会给您我提到的问题。此外，对不起，该网站是愚蠢的丑陋。只是尽快重新创建一些东西以重现问题。尽管您可以查看源代码中的所有代码，但我很高兴发布任何请求的代码。感谢您的输入。

更新

该网站很大程度上缺乏设置的高度和宽度，因为这是我第一次尝试响应式设计。这里有一些要求的代码。

CSS

/*#menu-bar
{
     background-color: #61471f;
   background-image: url(images/fallback-gradient.png);
    background-image:-moz-linear-gradient(top, #d7bf90, #61471f);
    background-image:-webkit-gradient(linear,0 0,0 100%, from(#d7bf90), to(#61471f));
    background-image:-webkit-linear-gradient(top, #d7bf90, #61471f);
    background-image:     -ms-linear-gradient(top, #d7bf90, #61471f);
    background-image:      -o-linear-gradient(top, #d7bf90, #61471f);
    color: #fff;
}*/

html {
      font-size: .80em;
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #000;
    height: 100%;
}
body {
background: url('/sites/default/files/images/wood-background.png') repeat center top;
height: 100%;
  color: #000;
}

header p
{
margin: 0;
}

div#page-wrapper
{
height: 100%; 
}

div#page
{
max-width:960px;
background-color:#000;
margin: 0 auto;
height: 100%; 
}

div#columns
{
padding-right: 20px;
}
div.flex-container
{
    border-bottom: 4px solid #ffc82f;
}

div.field.field-name-body.field-type-text-with-summary.field-label-hidden.view-mode-teaser
{
    display: none;
}
div.messages
{
    margin-top: 0;
}

div.addedtocart{
  border: 1px solid #A31514;
  color: #ffffff;
  background-color: #A31514;
  padding: 2px 10px;
  max-width: 170px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
}

article#article-45
{
display:none;
}

article#article-10
{
margin-bottom:0;
}

div#content
{
margin:0 0 10px 10px;
}

div#footer-content
{
margin-right:7px;
}

div#block-nodesinblock-0
{
margin-bottom:0;
}

#block-system-main.content-display-grid article.article
{
min-height: 250px;
}

.hl-l .region-header 
{
margin: 0;
margin-bottom: -5px;
}

#branding
{
margin: 0;
display: none;
}

#header-wrapper 
{
    border-bottom:none;
    /*background-image:url('/sites/default/files/images/Daisy_web_page_header.gif');
    background: url('/sites/default/files/images/Daisy_web_page_header.gif');
    background-repeat: no-repeat;
    background-position: center top;*/
    filter: none;
  -ms-filter: none;
  /*margin-bottom: -3px; Maybe fix black line above menu*/
  /*height: 223px; Commented out for responsive */
    background-color:#FFC82F;
}

#header-wrapper .container
{
z-index: 900;
}


#header-wrapper header
{
/*height: 185px;*/
position: relative;
margin: 0;
}

#nav-wrapper
{   /*position: absolute;*/
    top: 0;
    /*width: 100%;*/
    box-shadow: none;
    display: block;
}

select#mobilemenu
{
display: none;
}

#menu-bar
{
    background: url('/sites/default/files/images/Yellow_bar.gif') repeat-x center top;
}

.sf-menu li ul li, .sf-menu li ul a
{
background-color:#FFC82F;
margin-top:-5px;
}

a.sf-depth-2
{
margin-right:0 !important; 
}

a.sf-depth-3
{
margin-right:0 !important; 
}

.sf-menu li:hover ul, .sf-menu.sfHover ul
{
margin:0;
}

.sf-menu ul
{
width: 14em !important;
}

.nav{
font-size:1.25em;
}

.nav li a{
color: #000;
}

.nav ul li
{
line-height:2.4em
}
.nav ul li a
{
line-height: 2.4em;
text-transform: none;
margin-right: 15px;
 }

.nav ul li a:hover
{
 background: #DDE;
 }

 .menuparent
 {
line-height: 2.4em;
text-transform: none;
margin-right: 15px;
font-weight: 700;
padding: 0 10px;
 }

 .menuparent:hover
 {
  background: #DDE;
 }

#content-wrapper
{
    border-top: none;
    border-bottom: none;
    padding: 0;
}
#secondary-content-wrapper .texture-overlay
{
    padding-top: 4em; /* Was Zero and Static, but changed back for responsive*/
    border-bottom: none;
}

#secondary-content-wrapper .region-secondary-content, #tertiary-content-wrapper .region-tertiary-content
{
    margin:0;
}

#content-wrapper.no-secondary
{
    /*padding: 0;*/
    background: #fff;
}

article header 
{
    margin: 0;
}
.content-display-grid article.article h1 
{
min-height: 38px;
}

#footer-wrapper
{
border: none;
}

#page-footer
{
    color: #fff;
    text-align: right;
    font-size: 8.5pt;
    background-color:#000;
}
#page-footer a, #page-footer a:visited, #page-footer a:link, #page-footer a:hover, #page-footer a:active
{
    text-decoration: none;
    color: #fff;
}
#page-footer a:hover
{
    text-decoration: underline;
}

footer.clearfix
{
background-color: #000;
}

input[type="submit"]
{
    background-color: #a31514;
    background-image: none;
    color: #fff;
    border: none;
    margin-right:3px;
    filter: none;
    -ms-filter: none;
}

input#edit-checkout, input#edit-continue 
{
    margin-right:3px;
}



input[type="radio"][name^="commerce"]
{
    display:none;
}

input#edit-quantity
{
    border: 1px solid #d5d5d5;
    background-color: #fff;
        filter: none;
    -ms-filter: none;
}

input#edit-account-login-mail
{
width:227px;
}

form.commerce-add-to-cart input, .add-to-cart #edit-actions input
{
    filter: none;
    -ms-filter: none;
}

div.block-inner.clearfix
{
    margin: 0;
}

/*Nationals Menu*/

ul li.expanded
{
list-style-image: none;
list-style-type: none;
}

ul li.leaf
{
list-style-image: none;
list-style-type: none;
}

/**
*Tabber CSS
*/

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #000; }
ul.tabbernav li a:visited { color: #000; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #FFC82F;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 1px solid white;
}


/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:none;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

/*Migrated from Old Daisy Site*/

.retailer
{
    display: block;
    padding: 10px 10px 20px 10px;
    border-top: 1px solid #000;
    /*height: 75px;*/
}
.retailer img
{
    clear: both;
}
.retailer p
{
    font-size: 10px;
    margin-left: 125px;
}
.retailer a
{
    font-size: 13px;
}
.retailer b
{
    font-size: 12px;
}

h4
{
font-size: 18px;
}

tbody
{
border: none;
}

HTML

<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7" lang="en" dir="ltr"><![endif]-->
<!--[if (lte IE 6)&(!IEMobile)]><html class="ie6 ie6-7 ie6-8" lang="en" dir="ltr"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="ie7 ie6-7 ie6-8" lang="en" dir="ltr"><![endif]-->
<!--[if (IE 8)&(!IEMobile)]><html class="ie8 ie6-8" lang="en" dir="ltr"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html lang="en" dir="ltr"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:dc="http://purl.org/dc/terms/"
  xmlns:foaf="http://xmlns.com/foaf/0.1/"
  xmlns:og="http://ogp.me/ns#"
  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
  xmlns:sioc="http://rdfs.org/sioc/ns#"
  xmlns:sioct="http://rdfs.org/sioc/types#"
  xmlns:skos="http://www.w3.org/2004/02/skos/core#"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema#"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta about="/node/1" property="sioc:num_replies" content="0" datatype="xsd:integer" />
<meta content="Test Page" about="/node/1" property="dc:title" />
<link rel="canonical" href="/node/1" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<link rel="shortlink" href="/node/1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>Test Page | JSFix</title>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/default/files/css/css__9zsakYbWSOTLroLLtWO9P7zLJXhXtSJo2OgXN4wIrU.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/default/files/css/css_Vn_p7xhZmS8yWWx26P0Cc7Tm0GG2K1gLWEoVrhw5xxg.css" media="all" />
<style>body.snf-gwf-open-sans #site-name{font-family :'Open Sans'}
body.ssf-gwf-open-sans #site-slogan{font-family:'Open Sans'}
body.ptf-gwf-open-sans #page-title{font-family:'Open Sans'}
body.ntf-gwf-open-sans .article-title{font-family:'Open Sans'}
body.ctf-gwf-open-sans .comment-title{font-family:'Open Sans'}
body.btf-gwf-open-sans .block-title{font-family:'Open Sans'}
.flexible-slideshow,.flexible-slideshow .article-inner,.flexible-slideshow .article-content,.flexslider{max-width:940px;}
</style>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/default/files/css/css_-ahHBm_xiz8FfJcOkgLwWABHL05_CSqrP_Fvca-NQYI.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/default/files/css/css_kOgNrNOOFZK7-60fYtH9T0gsBZmmSm633A_N1s0urS8.css" media="screen" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" media="all" />

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/all/themes/at-commerce/css/ie-6.css?m8v34m" media="all" />
<![endif]-->

<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/all/themes/daisy/css/ie-8.css?m8v34m" media="all" />
<![endif]-->

<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/all/themes/daisy/css/ie-lte-7.css?m8v34m" media="all" />
<![endif]-->

<!--[if lte IE 9]>
<link type="text/css" rel="stylesheet" href="http://dev.jsfix.gotpantheon.com/sites/all/themes/daisy/css/ie-lte-9.css?m8v34m" media="all" />
<![endif]-->
<script src="http://dev.jsfix.gotpantheon.com/sites/default/files/js/js_3jHghlMLrjr9xXAC0JufqSSch3oAbkZstSqYdc4uuck.js"></script>
<script src="http://dev.jsfix.gotpantheon.com/sites/default/files/js/js_0h7CTuYRo_Ghzoteora_GwNIEjQUJsrG35yK6tpOL4k.js"></script>
<script src="http://dev.jsfix.gotpantheon.com/sites/default/files/js/js_bw8RYuKrTKJAeDPfrHmpjEzmr12cPs86OqIm37U0muU.js"></script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"daisy","theme_token":"_CBTf2UvK6px6JFgsj3Z4JxmSWKH4SfOsxj1kmfDdAQ","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/vertical-tabs.js":1,"sites\/all\/themes\/at-commerce\/js\/jquery.flexslider-min.js":1,"sites\/all\/themes\/at-commerce\/js\/slider.options.js":1,"sites\/all\/themes\/at-commerce\/js\/draw.js":1,"sites\/all\/themes\/adaptivetheme-7.x-2.1\/adaptivetheme\/adaptivetheme\/js\/respond.js":1,"sites\/all\/themes\/daisy\/js\/jquery.mobilemenu.min.js":1,"sites\/all\/themes\/daisy\/js\/AC_RunActiveContent.js":1,"sites\/all\/themes\/daisy\/js\/flowplayer-3.2.11.min.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"sites\/all\/themes\/adaptivetheme-7.x-2.1\/adaptivetheme\/adaptivetheme\/css\/at.base.css":1,"sites\/all\/themes\/adaptivetheme-7.x-2.1\/adaptivetheme\/adaptivetheme\/css\/at.layout.css":1,"sites\/all\/themes\/adaptivetheme-7.x-2.1\/adaptivetheme\/adaptivetheme\/css\/at.messages.css":1,"sites\/all\/themes\/at-commerce\/css\/styles.base.css":1,"sites\/all\/themes\/at-commerce\/css\/styles.modules.css":1,"sites\/all\/themes\/at-commerce\/css\/styles.settings.css":1,"sites\/all\/themes\/daisy\/color\/colors.css":1,"sites\/all\/themes\/daisy\/css\/daisy.css":1,"sites\/all\/themes\/daisy\/css\/lightwindow.css":1,"public:\/\/at_css\/daisy.responsive.layout.css":1,"sites\/all\/themes\/at-commerce\/css\/styles.slideshow.css":1,"http:\/\/fonts.googleapis.com\/css?family=Open+Sans":1,"sites\/all\/themes\/at-commerce\/css\/ie-6.css":1,"sites\/all\/themes\/at-commerce\/css\/ie-lte-7.css":1,"sites\/all\/themes\/at-commerce\/css\/ie-8.css":1,"sites\/all\/themes\/at-commerce\/css\/ie-lte-9.css":1,"sites\/all\/themes\/daisy\/css\/ie-8.css":1,"sites\/all\/themes\/daisy\/css\/ie-lte-7.css":1,"sites\/all\/themes\/daisy\/css\/ie-lte-9.css":1}}});</script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<script type="text/javascript" src="/sites/all/libraries/tabber/tabber-minimized.js">
</script>
<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
</head>

<body class="html not-front not-logged-in one-sidebar sidebar-first page-node page-node- page-node-1 page-type-page section-node site-name-hidden color-scheme-default daisy gecko win fs-medium bb-n hl-l mb-dd mma-l ia-c snc-n snw-n  sns-n ssc-n ssw-n  sss-n ptc-n ptw-n pta-l pts-n ntc-n ntw-n nta-l nts-n ctc-n ctw-n cta-l cts-n btc-uc btw-n bta-l bts-n itrc-0 isrc-6 bf-l snf-gwf-open-sans ssf-gwf-open-sans mmf-sss ptf-gwf-open-sans ntf-gwf-open-sans ctf-gwf-open-sans btf-gwf-open-sans hide-ss-nav">
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
  </div>
    <div id="page-wrapper"><div id="page">


  <div id="header-wrapper">

    <div class="container clearfix">
      <header class="clearfix">

        <div id="branding" class="clearfix no-logo site-name-hidden no-slogan">

                      <hgroup class="element-invisible">
                              <h1 id="site-name" class="element-invisible"><a href="/" title="Home page">JSFix</a></h1>
                                        </hgroup>
                  </div>



      </header>
    </div>
  </div>


  <div id="content-wrapper" class="no-secondary"><div class="container">




    <div id="columns"><div class="columns-inner clearfix">
      <div id="content-column"><div class="content-inner">



                <section id="main-content">



          <div id="content">  <div class="region region-content">
    <div id="block-system-main" class="block block-system block-odd block-count-1 block-region-content">
  <div class="block-inner clearfix">
                <div class="block-content content no-title">
      <article id="article-1" class="article article-type-page odd article-full clearfix" about="/node/1" typeof="foaf:Document" role="article">
  <div class="article-inner clearfix">


              <header class="clearfix">


                  <h1 property="dc:title" datatype="" class="article-title">
                          Test Page                      </h1>


      </header>

    <div class="article-content clearfix">
    <div class="field field-name-body field-type-text-with-summary field-label-hidden view-mode-full"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="tabber">
<div class="tabbertab">
<h3>Overview</h3>
<p><br /></p>
<p>Bacon ipsum dolor sit amet sausage t-bone spare ribs ham hock drumstick sirloin bresaola fatback. Fatback tongue pork belly shoulder. Beef ribs fatback salami ball tip spare ribs pork belly chuck ham hock shank sausage pork loin shankle kielbasa. Meatball jowl jerky prosciutto, turducken brisket tenderloin rump capicola. Ham hock pork loin beef capicola andouille corned beef salami short ribs pork sirloin turkey fatback bresaola tenderloin.</p>
</div>
<div class="tabbertab">
<h3>Specifications</h3>
<p>
Bacon ipsum dolor sit amet sausage t-bone spare ribs ham hock drumstick sirloin bresaola fatback. Fatback tongue pork belly shoulder. Beef ribs fatback salami ball tip spare ribs pork belly chuck ham hock shank sausage pork loin shankle kielbasa. Meatball jowl jerky prosciutto, turducken brisket tenderloin rump capicola. Ham hock pork loin beef capicola andouille corned beef salami short ribs pork sirloin turkey fatback bresaola tenderloin.</p>
<p>Biltong kielbasa spare ribs pork fatback. Short loin shankle bresaola short ribs chuck. Spare ribs pig prosciutto tongue capicola, ribeye shoulder turducken sausage hamburger t-bone bresaola meatloaf brisket. Filet mignon shank rump tri-tip swine, shankle bresaola. Beef chuck swine ham hock flank corned beef pork chop spare ribs capicola turducken shankle bresaola t-bone tenderloin pig. Ground round strip steak flank, chuck shoulder rump beef drumstick tri-tip venison pork belly meatball beef ribs pork loin.</p>
<p>Ham hock sausage short loin ball tip beef ribs ham spare ribs, andouille hamburger beef shoulder. Flank jowl bacon boudin kielbasa, chicken rump pork ribeye turkey andouille pork belly. Prosciutto biltong beef ribs, t-bone short ribs pancetta salami rump spare ribs ham hock kielbasa meatloaf. Shoulder tongue tri-tip capicola shank, chicken cow ham hock hamburger ribeye meatloaf. Beef ribs hamburger turkey t-bone leberkas pork loin. Shoulder capicola brisket, ground round andouille pastrami kielbasa ham hock t-bone hamburger boudin pork loin pork belly.</p>
<p>Meatloaf salami fatback pork chop shankle. Sausage meatball ground round rump prosciutto. Jerky pork belly bresaola tenderloin tail spare ribs pig, chicken ribeye pork chop pork turducken pastrami pancetta. Pancetta chuck prosciutto venison bacon fatback. Jowl turducken leberkas ham turkey. Pork belly fatback ball tip tenderloin andouille ham hock swine jowl rump pork chop tongue pancetta frankfurter ground round.</p>
<p>Hamburger pork belly sirloin fatback beef shank chicken leberkas pig sausage. Jowl ground round bacon tail sausage sirloin. Brisket ham hock drumstick ground round tenderloin chuck pork chop, pancetta swine shankle ball tip. Turkey swine pig beef ribs. Pork belly jerky pork flank, frankfurter ground round pork loin chicken.
</p></div>
<div class="tabbertab">
<h3>Downloads</h3>
<p>Bacon ipsum dolor sit amet sausage t-bone spare ribs ham hock drumstick sirloin bresaola fatback. Fatback tongue pork belly shoulder. Beef ribs fatback salami ball tip spare ribs pork belly chuck ham hock shank sausage pork loin shankle kielbasa. Meatball jowl jerky prosciutto, turducken brisket tenderloin rump capicola. Ham hock pork loin beef capicola andouille corned beef salami short ribs pork sirloin turkey fatback bresaola tenderloin.</p>
<p>Biltong kielbasa spare ribs pork fatback. Short loin shankle bresaola short ribs chuck. Spare ribs pig prosciutto tongue capicola, ribeye shoulder turducken sausage hamburger t-bone bresaola meatloaf brisket. Filet mignon shank rump tri-tip swine, shankle bresaola. Beef chuck swine ham hock flank corned beef pork chop spare ribs capicola turducken shankle bresaola t-bone tenderloin pig. Ground round strip steak flank, chuck shoulder rump beef drumstick tri-tip venison pork belly meatball beef ribs pork loin.</p>
<p>Ham hock sausage short loin ball tip beef ribs ham spare ribs, andouille hamburger beef shoulder. Flank jowl bacon boudin kielbasa, chicken rump pork ribeye turkey andouille pork belly. Prosciutto biltong beef ribs, t-bone short ribs pancetta salami rump spare ribs ham hock kielbasa meatloaf. Shoulder tongue tri-tip capicola shank, chicken cow ham hock hamburger ribeye meatloaf. Beef ribs hamburger turkey t-bone leberkas pork loin. Shoulder capicola brisket, ground round andouille pastrami kielbasa ham hock t-bone hamburger boudin pork loin pork belly.</p>
</div>
</div>
</div></div></div>    </div>




  </div>
</article>
    </div>
  </div>
</div>
  </div>
</div>

        </section>


      </div></div>

        <div class="region region-sidebar-first sidebar">
    <section id="block-user-login" class="block block-user block-odd block-count-2 block-region-sidebar-first">
  <div class="block-inner clearfix">
              <h2 class="block-title">User login</h2>
            <div class="block-content content">
      <form action="/node/1?destination=node/1" method="post" id="user-login-form" accept-charset="UTF-8"><div><div class="form-item form-type-textfield form-item-name">
  <label for="edit-name">Username <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" id="edit-name" name="name" value="" size="15" maxlength="60" class="form-text required" />
</div>
<div class="form-item form-type-password form-item-pass">
  <label for="edit-pass">Password <span class="form-required" title="This field is required.">*</span></label>
 <input type="password" id="edit-pass" name="pass" size="15" maxlength="60" class="form-text required" />
</div>
<div class="item-list"><ul><li class="even first"><a href="/user/register" title="Create a new user account.">Create new account</a></li><li class="odd last"><a href="/user/password" title="Request new password via e-mail.">Request new password</a></li></ul></div><input type="hidden" name="form_build_id" value="form-2JWfMgxjlSDsKHLtwuQhcdA4TzwjjNyIydl0i8x1oTM" />
<input type="hidden" name="form_id" value="user_login_block" />
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Log in" class="form-submit" /></div></div></form>    </div>
  </div>
</section>
  </div>

    </div></div>


  </div></div>


  <div id="page-footer">

          <div id="footer-wrapper"><div class="container clearfix">
        <footer class="clearfix">
            <div class="region region-footer">
    <div id="block-system-powered-by" class="block block-system block-odd block-count-3 block-region-footer">
  <div class="block-inner clearfix">
                <div class="block-content content no-title">
      <span>Powered by <a href="http://drupal.org">Drupal</a></span>    </div>
  </div>
</div>
  </div>
        </footer>
     </div></div>
      </div>

</div></div>
  </body>
</html>

更新 2

忘了提到任何调整窗口大小（无论是高度还是宽度）都会暂时自动解决问题。

score 1 · Accepted Answer

看起来这里发生了一些事情。首先在css中的某个地方你有一个'scroll'或'auto'属性集，它允许页面高度改变。其次，带有页脚的 vid 没有从它的外观设置宽度和高度。相反，它只是填充了中心 div 没有填充文本的任何空间。所以很可能没有定义的高度。我还建议确保底部页脚设置为“底部：0px”-为我们提供一些 css 和 html 代码以提供更多帮助？

将此代码添加到 footer.clearfix：

    margin-bottom: 0px;
    height: 30px;

在内容包装棒内部：

    height: 100%;
    overflow: auto;

它会添加一个滚动条，但如果你这样做，它会让你的问题变得非常明显。问题是你在重复代码。铁杆。每次您单击某个选项卡时，该页脚都会重新创建自己，而不是一次硬编码坐在底部，或者您在“页脚”和“页面”内部都有一个页脚。认为这是第二个......而“页面”中的那个正在引起问题。如果您打算复制它并且只想要页面大小标准，那么只需添加内容包装器更改。如果假定页脚是标准尺寸，请添加 footer.clearfix 更改以了解您的问题。

如果您还没有为您的浏览器安装 Firebug，建议您安装它。它将允许您“检查”元素并更改 css 以更快地弄清楚发生了什么。

javascript - IE7 使用 Javascript 选项卡导航误读页面上的 CSS

1 回答 1

Related

Reference