IFRAME中的CSS问题
IFRAME中的CSS问题
提问于 2009-10-13 13:37:52
我想在框架中打开一个模式弹出窗口。我在这里粘贴了框架的超文本标记语言代码和css样式，此代码在IE 7.0中运行良好，但在IE 6.0中不适用。在IE 6.0中，我看到panel.What中的滚动条会导致此问题?我如何解决它？
我通过这些宽度和高度在我的主页中打开框架。
<cc1:modalpopupextender ID="mdlDelete" runat="server" PopupControlID="PnlFrameDelete" BackgroundCssClass="modalBackground" OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel" TargetControlID="btnDelete" >
</cc1:modalpopupextender><asp:Panel ID="PnlFrameDelete" runat="server" style="display:none">
<iframe id="deletefrm" frameborder="0" src="../Frame/deletefrm.aspx" height="98px" width="342px" > </iframe> <div> <asp:Button ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" style="display:none" /> <input id="btnDeleteCancel" type="button" value="No" style="width:20px;display:none" /> </div> </asp:Panel>
<body style="margin: 0px;"> 这是框架的aspx：
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Panel ID="pnlDelete" runat="server" CssClass="modal-dialog"> <div class="container"> <div class="header">
<div class="msg">Warning</div> <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('mdlDelete').hide(); return false;" /> </div><div class="body"> <h2><asp:Label ID="lblMsg" runat="server" Text="Are u sure?"></asp:Label></h2> </div> <div class="footer"> <div class="right">
<asp:Button ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" OnClientClick="okay();" /> <input id="btnDeleteCancel" type="button" value="No" onclick="cancel();" style="width:40px" /> </div> </div> </div> </asp:Panel> </form>这是CSS：
/* dialog frame */
.modal-dialog
{
position:absolute;
margin:auto;
height:98px;
}
/* dialog contents container */
.modal-dialog .container
{
font-family:tahoma,helvetica,arial,sans-serif;
font-size:11px;
width:340px;
border:solid 1px #99aabd;
background-color:#F2F9FF;
padding: 0px 0px 0px 0px;
}
/* dialog header */
.modal-dialog .header
{
background:url(../images/sprite.gif) repeat-x 0px -1100px;
height:20px;
padding-top:5px;
}
/* dialog header message */
.modal-dialog .header .msg
{
vertical-align:middle;
padding-left:6px;
color:#fff;
font-size:12px;
font-weight:bold;
}
/* dialog body */
.modal-dialog .body
{
height:40px;
background-color:#F2F9FF;
}
/* dialog body message */
.modal-dialog .body h2
{
padding-top:10px;
background-color: #F2F9FF;
font-size:14px;
text-align:center;
font-weight:normal;
}
/* dialog footer */
.modal-dialog .footer
{
height:30px;
background-color: #F2F9FF;
}
/* dialog footer buttons */
.modal-dialog .footer .right
{
background-color: #F2F9FF;
float:none;
text-align:center;
}
/* dialog footer checkbox */
.modal-dialog .footer .left
{
background-color: #F2F9FF;
float:left;
text-align:left;
}
/* dialog close */
.modal-dialog .close
{
right:4px;
background: url(../images/icons.gif) no-repeat -732px 0px;
width:16px;
cursor:hand;
position:absolute;
top:5px;
height:16px;
}
/* dialog close hover */
.modal-dialog .close:hover { background: url(../images/icons.gif) no-repeat -749px 0px; }
/* modal overlay */
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
opacity:0.5;
} 回答 2
Stack Overflow用户
回答已采纳
发布于 2009-10-13 13:56:05
我猜这是由于IE6盒子模型中众所周知的“边界错误”造成的。
请看一下：
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
或者：
http://www.simple-site.eu/test-lab/ie-bugs/ie6-border-bug.html
Stack Overflow用户
发布于 2009-10-13 13:45:47
快速看一下，我已经看到你的框架被设置为342px的宽度，而你的容器在CSS中被设置为340。您还可以在容器中的一些元素上设置填充。为了避免出现滚动条，你必须在容器的宽度和高度中包含它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1560318
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号