0

可能重复:
jQuery 定位问题

好吧,如果您看到 FF 15 上的链接,那就太好了。

http://www.mbu.mn/test/

以及它会破坏的其他浏览器。中断意味着它没有覆盖确切的大小。它更向左,所以看起来很糟糕。我的英语很差,所以请理解我的问题:P

请帮忙解决这个问题。

好的,HTML就像

<!doctype html>
<html lang="en">
<head>
    <title>Nofu Entertaiment</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.pageslide.css" />
</head>
<body>
<p><a href="javascript:$.pageslide.close()">Close</a></p>
<div id="main">

    <div id="content">
        <ul>
            <li>
                <a href="#modal" class="second">Click This ..</a>
            </li>
            <li>
                <a href="#modal1" class="second">Click This ..</a>

            </li>
        </ul>
        <div id="modal">
            <h2>Modal</h2>
                <p>This slide uses "modal" option set to "true". When using a modal pageslide, clicking on the main window will not close the window. You must explicitly call <code>$.pageslide.close()</code>.</p>
                <p><a href="javascript:$.pageslide.close()">Close</a></p>
        </div>
        <div id="modal1">
            <h2>testing 1 2 3</h2>
            <p>test test <code>$.pageslide.close()</code>.</p>   
        </div>
    </div>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.pageslide.min.js"></script>
    <script>
        /* Default pageslide, moves to the right */
        $(".first").pageslide();

        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
        $(".second").pageslide({ direction: "left", modal: true });
    </script>
</div>
</body>
</html>

和CSS是

body {
    margin: 0 auto;
}
#main {
    margin: 0 auto;
    width: 600px;
}
#content {
    width: 600px;
    margin: 0 auto;
    background: #999999;
}
#content h1 {
    color: #333;
    line-height: 1em;
}
#content ul {
    padding-left: 0;
    list-style: none;
}
#content ul li {
    margin-bottom: 20px;
}
#modal {
    display: none;
}
#modal a {
    background: #CCC;
    color: #333;
    font-weight: bold;
    padding: 5px 10px;
    border: none;
    float: left;
}
#modal a:hover {
    background: #aaa;
}
#modal1 {
    display: none;
}
#modal1 a {
    background: #CCC;
    color: #333;
    font-weight: bold;
    padding: 5px 10px;
    border: none;
}
#modal1 a:hover {
    background: #aaa;
}
#pageslide {
    /* These styles MUST be included. Do not change. */
    display: block;
    margin: 0 auto;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;
    /* Specify the width of your pageslide here */
    width: 600px;
    /* These styles are optional, and describe how the pageslide will look */
    background-color: #333;
    color: #FFF;
    -webkit-box-shadow: inset 0 0 5px 5px #222;
    -moz-shadow: inset 0 0 5px 5px #222;
    box-shadow: inset 0 0 5px 5px #222;
    position: absolute;
    overflow: hidden;
}

而jQuery是

/*
 * jQuery pageSlide
 * Version 2.0
 * http://srobbin.com/jquery-pageslide/
 *
 * jQuery Javascript plugin which slides a webpage over to reveal an additional interaction pane.
 *
 * Copyright (c) 2011 Scott Robbin (srobbin.com)
 * Dual licensed under the MIT and GPL licenses.
*/
;(function(b){function j(e,a){if(0===e.indexOf("#"))b(e).clone(!0).appendTo(c.empty()).show();else{if(a){var d=b("<iframe />").attr({src:e,frameborder:0,hspace:0}).css({width:"100%",height:"100%"});c.html(d)}else c.load(e);c.data("localEl",!1)}}function k(b,a){var d=c.outerWidth(!0),f={},g={};if(!c.is(":visible")&&!h){h=!0;switch(b){case "left":c.css({margin:"0 0 0 600px"});f["margin"]="0 auto"+d;g.right="+="+d;break;default:c.css({left:"-"+d+"px"}),f["margin"]="0 auto"+d,g.left="+="+d}l.animate(f,a);c.show().animate(g,a,function(){h=!1})}}var l=b("#main"),c=b("#pageslide"),h=!1,m;0==c.length&&(c=b("<div />").attr("id","pageslide").css("display","none").appendTo(b("#main")));b.fn.pageslide=function(e){this.click(function(a){var d=b(this),f=b.extend({href:d.attr("href")},e);a.preventDefault();a.stopPropagation();c.is(":visible")&&d[0]==m?b.pageslide.close():(b.pageslide(f),m=d[0])})};b.fn.pageslide.defaults={speed:500,direction:"right",modal:!1,iframe:!0,href:null};b.pageslide=function(e){var a=b.extend({},b.fn.pageslide.defaults,e);c.is(":visible")&&c.data("direction")!=a.direction?b.pageslide.close(function(){j(a.href,a.iframe);k(a.direction,a.speed)}):(j(a.href,a.iframe),c.is(":hidden")&&k(a.direction,a.speed));c.data(a)};b.pageslide.close=function(c){var a=b("#pageslide"),d=a.outerWidth(!0),f=a.data("speed"),g={},i={};if(!a.is(":hidden")&&!h){h=!0;switch(a.data("direction")){case "left":g["margin"]="0 auto"+d;i.right="-="+d;break;default:g["margin"]="0 auto"+d,i.left="-="+d}a.animate(i,f);l.animate(g,f,function(){a.hide();h=!1;"undefined"!=typeof c&&c()})}};c.click(function(b){b.stopPropagation()});b(document).bind("click keyup",function(e){"keyup"==e.type&&27!=e.keyCode||c.is(":visible")&&!c.data("modal")&&b.pageslide.close()})})(jQuery);
4

2 回答 2

1

它显然是CSS

尝试在您的项目中使用 CSS 框架...

http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/

于 2012-10-02T07:58:15.903 回答
1

我认为这是一个 CSS 错误,它只是边距或填充的问题。你能清理一下css以免你感到困惑吗?

然后我认为对于浮动:离开你,你需要先清除:两者。

于 2012-10-02T07:38:17.560 回答