html输出中有额外的空间
在这里我粘贴html和css，当UI出现时，额外的空间就出现了。只是不明白它为什么会来，以及如何让它看起来合适 HTML 我也在这里粘贴屏幕截图 两个名为html输出中有额外的空间,html,css,Html,Css,在这里我粘贴html和css，当UI出现时，额外的空间就出现了。只是不明白它为什么会来，以及如何让它看起来合适 HTML 我也在这里粘贴屏幕截图 两个名为dialog2&container的div之间有额外的空间，所以请告诉我需要修改哪些css，这样就不会在左侧、右侧、顶部和底部有额外的空间。谢谢 下面是我的代码的js fiddle演示 这是我正在工作的完整代码 .noTitleStuff.ui对话框标题栏{显示：无} .屏幕外{位置：绝对；左侧：-999em；} 多囊卵巢综合征 { 背景图
dialog2&container
.noTitleStuff.ui对话框标题栏{显示：无}
.屏幕外{位置：绝对；左侧：-999em；}
多囊卵巢综合征
{
背景图像：url（'../Images/ajaxloader.gif'）；
背景重复：无重复；
背景位置：中心；
高度：350px；
宽度：300px；
}
.ui对话框.ui对话框内容{
填充：0！重要；
}
$（文档）.ready（函数（）{
$（“#opener2”）。单击（函数（）{
var$this=$（this）；
$this.toggleClass（'show'）；
if（$this.hasClass（'show'））{
$（“”）。对话框(
{
自动打开：错误，
宽度：50，
身高：50，
dialogClass:'NotitListuff'，
真的，
可调整大小：false，
打开：功能（事件、用户界面）{
$（this.dialog（“widget”）.addClass（“BusyStyles”）；
$（this.parent（）.appendTo（“form”）；
}
}).dialog（'open'）.show（）
.load（'login.aspx'，函数（responseTxt、statusTxt、xhr）{
如果（statusTxt==“成功”）{
//警报（“发现数据”）；
//sHtml=响应文本；
//var元素=$（this.find（“#Container”）；
////$（element.addClass（'offscreen'）.show（）；
//var width=element.width（）；
//var height=element.height（）；
////警报（'h'+高度+w'+宽度）；
//sHtml=$（sHtml.find（'#Container'）.html（）；
//$sHtml=$（sHtml）
//$sHtml.css（{'display'：'none'}）.appendTo（'div#dialog2'）；
$（this.dialog（“widget”）.removeClass（'BusyStyles'）；
$（“#dialog2”）.dialog（“小部件”）.animate({
宽度：“346px”，
高度：“自动”
}, {
持续时间：200，
步骤：函数（）{
$（“#dialog2”）.dialog（'option'、'position'、'center'）；
}
});
$（“#dialog2”）.css（{height:'auto'，width:'auto'}）；
//$（“#dialog2”）.html（sHtml）；
}
如果（statusTxt==“错误”）{
警报（“错误：+xhr.status+”：“+xhr.statusText”）；
}
});
//$（“#dialog2”）.dialog（'open'）.show（）；
}
否则{
$（“#dialog2”）.dialog（“关闭”）.dialog（“销毁”）.remove（）；
}
返回false；
});
});
打开对话框2
填充：0.ui-dialog .ui-dialog-content{
padding:0 !important;
}
你有打开对话的js吗？如果是jqueryui的对话，你应该能够设置宽度和高度，这样就没有空间了：我这样做了，但没有运气，因为我看不到任何空间。container是dialog2的子代，您能更明确地说明您在谈论什么空间吗？您正在测试哪个浏览器？我没有看到在两个名为dialog2&container的div之间有任何额外的空间
#acloginpod {
background: url("../Images/acloginpodbg.gif") repeat-x scroll 0 0 #ebebeb;
border: 1px solid #d3d3d3;
}
#acloginpod label {
color: #444;
display: block;
font-size: 15px;
margin-bottom: 3px;
}
#caption {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 3px;
color: White;
font-family: arial;
font-size: 14px;
font-weight: bold;
padding: 10px;
text-align: center;
text-shadow: 0 2px 1px #000;
}
.btnlogin {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 6px;
box-shadow: 0 0 2px #333;
color: #ffffff;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: bold;
height: 33px;
padding: 3px 10px;
text-decoration: none;
text-shadow: 0 2px 1px #000;
}
.btnlogin:hover {
background: url("../Images/button-background-2.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 3px #046629 inset;
text-shadow: 0 2px 3px #333;
}
.btnlogin:active {
position: relative;
top: 1px;
}
#acloginpod input.textinput {
background: url("../Images/textinputbg.gif") repeat-x scroll 0 0 #ffffff;
border: 1px solid #d3d3d3;
color: #000000;
font-size: 15px;
margin-bottom: 10px;
padding: 7px 0;
text-indent: 7px;
width: 100%;
}
#acloginpod .acloginform {
margin: 22px;
}
#acloginpod form, #acloginpod fieldset {
border-width: 0;
margin: 0 !important;
padding: 0 !important;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />
<style type="text/css">
.noTitleStuff .ui-dialog-titlebar {display:none}
.offscreen {position: absolute; left: -999em;}
.BusyStyles
{
background-image: url('../Images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 300px;
}
.ui-dialog .ui-dialog-content{
padding:0 !important;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#opener2").click(function () {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$("<div id='dialog2'/>").dialog(
{
autoOpen: false,
width: 50,
height: 50,
dialogClass: 'noTitleStuff',
draggable: true,
resizable: false,
open: function (event, ui) {
$(this).dialog("widget").addClass('BusyStyles');
$(this).parent().appendTo("form");
}
}).dialog('open').show()
.load('login.aspx', function (responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
//alert('data found');
// sHtml = responseTxt;
// var element = $(this).find('#Container'); ;
// //$(element).addClass('offscreen').show();
// var width = element.width();
// var height = element.height();
// //alert('h ' + height + ' w ' + width);
// sHtml = $(sHtml).find('#Container').html();
// $sHtml = $(sHtml)
// $sHtml.css({ 'display': 'none' }).appendTo('div#dialog2');
$(this).dialog("widget").removeClass('BusyStyles');
$("#dialog2").dialog("widget").animate({
width: '346px',
height: 'auto'
}, {
duration: 200,
step: function () {
$("#dialog2").dialog('option', 'position', 'center');
}
});
$("#dialog2").css({ height: 'auto', width: 'auto' });
//$("#dialog2").html(sHtml);
}
if (statusTxt == "error") {
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
//$("#dialog2").dialog('open').show();
}
else {
$("#dialog2").dialog("close").dialog('destroy').remove();
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<button id="opener2">open the dialog2</button>
</form>
</body>
</html>
.ui-dialog .ui-dialog-content{
padding:0 !important;
}