可能重复：
jQuery 定位问题
好吧，如果您看到 FF 15 上的链接，那就太好了。
以及它会破坏的其他浏览器。中断意味着它没有覆盖确切的大小。它更向左，所以看起来很糟糕。我的英语很差，所以请理解我的问题：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);