IE7在页面上使用Javascript选项卡导航错误读取CSS

时间:2012-08-16 19:37:51

标签: javascript css drupal internet-explorer-7

我正在构建一个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

忘记提及任何窗口调整大小,无论是高度还是宽度,都会立即自动解决问题。

1 个答案:

答案 0 :(得分:1)

看起来这里发生了一些事情。首先在css的某处,你有一个'scroll'或'auto'属性设置允许页面高度改变。第二,带有页脚的视频没有设置宽度和高度设置它的样子。相反它只是填充任何空间中心div与文本不填充..所以很可能没有定义的高度。我建议还要确保底部页脚设置为'bottom:0px' - 为我们提供一些CSS和HTML代码以帮助更多?

将此代码添加到footer.clearfix:

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

在内容包装棒内:

    height: 100%;
    overflow: auto;

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

如果您尚未安装Firebug,请建议您安装Firebug。它将允许您“检查”元素并更改css以更快地找出正在发生的事情。