从div中删除边框使其隐藏起来

因此，我在这里发生了一些奇怪的事情......我有我的div的边界进行测试，所以我可以看到它们的开始和结束位置。一旦我删除了边框的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吗？

谢谢

来源

2012-07-14 Troy Cosentino

你确定它的真正隐藏的，不只是换挡的地方看不到？删除边框会消除边框宽度与大小计算的差异，从而导致文档重新排列。 – 2012-07-14 22:07:58

我通常在切割设计时最好使用背景颜色，因为有边框会影响整个元素的尺寸，然后可能在移除时位置不同。 – jussinen 2012-07-14 22:23:26

即使世界的错误#main - 你还没有为位置属性的值..

来源

2012-07-14 22:12:34

哦哇..这就是它..我觉得自己像一个白痴哈哈谢谢你非常！ – 2012-07-14 22:27:25

虽然边界对问题有所影响似乎仍然很奇怪......反正，无所谓了 – 2012-07-14 22:29:42

尝试添加具有透明度的颜色的边框。

border: 1px dashed transparent;

由于您使用1px的边框，这意味着您有2个额外的像素垂直和水平。换句话说，如果你删除了边框。如果您使用的是width = something，那么您的元素可能不会放在以前使用的位置。

使用类似width: auto;的东西，如果高度太高，会使元素使用新的2像素。

使用透明颜色可能不是一个好主意，但它确保您的边框存在，并且您仍然像以前一样使用该2个额外的像素..但它们是透明的。如果你正在使用背景颜色。重构你的CSS可能会更好。

另一方面，我可能会建议使用背景而不是边框来检查元素的位置。

如果您设置不同的颜色，它将很容易检查您的布局和背景颜色不会影响元素的大小。

来源

2012-07-14 22:08:03

非常感谢你，现在透明的作品，我会回去重新评估一下，试图真正解决问题.. – 2012-07-14 22:26:20

从div中删除边框使其隐藏起来

回答

相关问题