Question

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

在上面的页面中，当您将浏览器缩小到475px宽以下时，标签将不再可用。我已经看了一个星期，无法弄清楚发生了什么。

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

Answer 1

具有品牌ID的标题元素奇怪地具有一组巨大的边距和填充。当显示收缩到足以使该元素位于页面其余部分之上时，这些巨大的边距和填充设置会阻止页面的其余部分与之交互。本质上，该标题底部的填充覆盖了所有内容。

尝试删除这些内容，您会看到它按预期工作。

具体在style.css的第289行，更改margin-bottom和padding-bottom的值...实际上只需删除它们。

Answer 2

通过萤火虫，我在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 #branding the 2nd one的那些css属性都有效时。

响应式网站 - 移动大小 - jQuery选项卡不起作用

2 个答案: