从div中删除边框会将其隐藏
从div中删除边框会将其隐藏
提问于 2012-07-15 06:06:26
所以我这里发生了一些奇怪的事情...我在div上设置了用于测试的边框，这样我就可以看到它们的起点和终点。一旦我删除了边框，我的一个div内容就消失了，我不明白为什么...
下面是我的主要html文件
<!DOCTYPE html>
<html>
<head>
<title>EasyZag Admin</title>
<!-- add the jQuery script -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- add the jQWidgets framework -->
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<!-- add the css themes -->
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<link href="stylesheets/basic.css" media="all" rel="stylesheet" type="text/css" />
<link href="jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='container'>
<div id="header">
<div id='logo'>
<img src="ezag_logo.jpeg" alt="eZag">
</div>
<script type="text/javascript">
$(document).ready(function () {
// Create a jqxMenu and set its width and height.
$("#jqxmenu").jqxMenu({ height: 30 , theme: 'darkblue'});
$("#main").height($('#container').height() - $('#header').height() - $('#footer').height() - 10);
});
$(window).resize(function() {
$("#main").height($('#container').height() - $('#header ').height() - $('#footer').height() - 10);
});
</script>
<div id='jqxmenu'>
<ul>
<li><a href="#">Home</a></li>
<li>Clients
<ul>
<li><a href="#">Add Client</a></li>
<li><a href="#">All Clients</a></li>
<li><a href="#">Search</a></li>
</ul>
</li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div><br />
<div id="main">
<?php
if(isset($_GET['section'])) {
//include which section
} else {
include "default.php";
echo "hello";
}
?>
</div>
<div id="footer">
<center>Copyright 2012, EasyZag</center>
</div>
</div>
</body>
</html>这是我的CSS文件
body, html { height: 99%; width: 99%;}
div {position: relative; border: 1px dotted;}
#container {width: 100%; height: 100%; background-color:#E8F4FF; border-radius:25px; border: solid; border-color: }
#header { float: left; height: 80px; width: 100%; }
#logo {float: left; width: 225px; height: 70px; padding-left: 10px; padding-top: 10px;}
#jqxmenu {float: left; position: relative; top: 40px; left: 0px; }
#main {position: width: 100%; height: 50%; overflow: auto;}
#footer {float: left; width: 100%; position: absolute; bottom: 0;}最后，所有php包含的代码如下：
Welcome to EasyZag Admin!<br />
<br />
Goals:<br />
<br />有谁知道为什么把div {position: relative；border: 1px dotted;}改成div {position: relative;}
在我的css文件中会完全删除包含php的div吗？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-07-15 06:12:35
#main中有一个错误-您没有包含position属性的值。
Stack Overflow用户
发布于 2012-07-15 06:08:03
尝试添加带有透明颜色的边框。
border: 1px dashed transparent;因为你使用了1px的边框，这意味着你在垂直和水平方向上有2个额外的像素。换句话说，如果您移除边框。如果你使用的是width = something，那么你的元素可能不会被放在原来的位置。
使用像width: auto;和高度这样的东西也会使元素使用新的2个像素。
使用透明颜色可能不是一个好主意，但它可以确保您的边框存在，并且您仍然像以前一样使用额外的2个像素。但它们是透明的。如果您使用的是背景色。重构你的css可能会更好。
另一方面，我可能建议使用背景而不是边框来检查元素的位置。
如果你设置不同的颜色，很容易检查你的布局和背景颜色不会影响元素的大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11487724
复制相关文章
相似问题
腾讯云开发者
