0

http://www.cheryldesign.com/category/portfolio/

上記のページで、ブラウザを幅 475 ピクセル未満に縮小すると、タブをクリックできなくなります。私はこれを1週間見てきましたが、何が起こっているのかわかりません。

jQuery(document).ready(function()
{
jQuery("#access").accessibleDropDown();
});

jQuery.fn.accessibleDropDown = function ()
{
var el = jQuery(this);

/* Setup dropdown menus for IE 6 */

jQuery("li", el).mouseover(function() {
    jQuery(this).addClass("hover");
}).mouseout(function() {
    jQuery(this).removeClass("hover");
});

/* Make dropdown menus keyboard accessible */

jQuery("a", el).focus(function() {
    jQuery(this).parents("li").addClass("hover");
}).blur(function() {
    jQuery(this).parents("li").removeClass("hover");
});
}
4

2 に答える 2

2

branding の ID を持つヘッダー要素には、奇妙なことに、巨大な余白とパディングがあります。この要素がページの残りの部分の上に配置されるほど表示が縮小されると、これらの巨大なマージンとパディングの設定により、ページの残りの部分が操作されなくなります。基本的に、そのヘッダーの下部にあるパディングがすべてを覆います。

これらを削除してみてください。期待どおりに動作することがわかります。

具体的には、style.css の 289 行目で、margin-bottom と padding-bottom の値を変更します。実際には、単にそれらを削除してみてください。

于 2012-11-27T05:19:39.713 に答える
0

firebugを通して、私big paddings and marginsはあなたの中にいくつか見つけましたstyle.css:

#branding {
    background: url("images/mobile_header.png") no-repeat scroll left top transparent;
    height: auto;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 10;
}

#branding {
    background-color: #55AEBB;
    background-image: url("images/pattern1.png");
    background-position: left top;
    background-repeat: repeat-x;
    box-shadow: 10px 0 5px 0 rgba(0, 0, 0, 0.25);
    float: left;
    margin-bottom: -99999px;    // i removed this from firebug and
    min-height: 100%;
    padding-bottom: 99999px;    // this one.
    position: fixed;
    top: 0;
    width: 20%;
    z-index: 10;
}

すべてi removedのCSS属性のこれらのカップルが機能したとき。#branding the 2nd one

于 2012-11-27T05:31:55.130 に答える