Question

我正在使用Colorbox在我的网站上显示一些消息。当我启动彩盒时，使用下面的代码，我的父页面的主体移动了一点点到richt和bottom（见图片）。

启动Colorbox的代码：

$(".weather a").colorbox({href: "page.html"});

图片：http://www.imgdumper.nl/uploads2/4b4b3ffd2abcf/4b4b3ffd26d54-screenshot.jpg

上面的图片是整个页面的和平（在页面的左上角拍摄）。当你仔细观察时，你会看到蓝色背景周围有一个大的白色边框。当我关闭彩色盒时，身体会自行重置（大部分时间）。

有谁知道如何解决这个恼人的问题？

Answer 1

这里是代码的一部分（整个代码太大）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<title>sad</title>

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />    
<link type="text/css" href="css/colorbox.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/color.js"></script>
<script type="text/javascript" src="js/timers.js"></script>
<script type="text/javascript" src="js/colorbox.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    jQuery.fn.getWeather = function(cityW,countryW) {
        $("#weather").hide();
        $("#loadWeather").show();

        $.ajax({
            type: "POST",
            url: "inc/weather.php",
            data: ({city : cityW, country : countryW}),
            success: function(msg){
                $("#weather").html(msg);
                $("#weather").show();   
                $("#loadWeather").hide();
                $("#weather a").colorbox({
                    href:"countries.php"
                });
            }
        }); 
    }
});
</script>

还有一些css：

* { padding: 0; margin: 0; border: 0; }

a { outline: none; cursor: pointer; cursor: hand; }

ul {
    list-style: none;
}

html,body { 
    height: 100%;
    margin: 0; 
    padding: 0;
}

body { 
    text-align: center; 
    margin: 0; 
    padding: 0; 
    height: 100%;
    background-color: #ffffff;
    font-family: Trebuchet MS, Verdana, Tahoma;
    font-size: 12px;
    text-align: center;
}

很抱歉代码的格式（我不确切知道它是如何工作的）。

Answer 2

如果您尝试在模式中嵌入整个html页面（包括<html>，<head>和其他标记），则可能会遇到此问题。

设置iframe: true并确保使用包含以避免此问题。

Colorbox稍微移动了html的身体

2 个答案: