Question

当我将外部div设置为100％并且内部div和表都设置为100％时，内部表与内部div的大小不同。内部表格右侧约2px。有人知道为什么会这样吗？

同样在IE的第二个表上，infobar2和表之间存在很大差距，我不知道为什么。非常感谢任何帮助

以下是实际代码：

/*-------------------------------------------Main Content---*/

#mainContent {

 float: left;

 width: 79%;



}

 /*---Top Nav---*/

 #mainContent #topNav {

  border: 1px solid #8AD12B;

  float: left;

  width: 100%;

  background: #fff;

  padding-bottom: 7px;

  margin-bottom: 10px;

 }

  #mainContent #topNav h1 {

   background: #D7EFB6;

   padding: 6px 15px;

   border-bottom: 1px solid #8AD12B;

  }

  #mainContent #topNav div {

   padding: 10px;

   width: 80%; 

   float: left;

   margin-right: 0px;

   margin-left: 8px;

   display: inline; /* for IE 6 and below */

  }

  #mainContent #topNav div.topnav1 {margin-left: 15px;}

  #mainContent #topNav div.topnav3 {width: 80%;margin: 0;}

  #mainContent #topNav div h2 {padding: 10px 0 7px;}

  #mainContent #topNav div ul {

   list-style: none;



  }

  #mainContent #topNav div ul li {

   margin-bottom: 0.40em;

   color: #7d7d7d;

   font-size: 85%;

  }

  #mainContent #topNav div ul li a {

   color: #6EA427;

   font-size: 120%;

  }



 /*---Info Bar---*/

 #mainContent #infoBar {

  background: #D7EFB6;

  border: 1px solid #8AD12B;

  float: left;

  width: 100%;

  margin-bottom: 10px;

 }

  #mainContent #infoBar h1 {padding: 6px 15px;}

  #mainContent #infoBar h1 span {

   font-weight: normal; 

   padding-left: 78px;

   color: #666;

  }



 #mainContent #infoBar2 {

  background: #D7EFB6;

  border: 1px solid #8AD12B;
  border-bottom: 0px;

  float: left;

  width: 100%;

 }

  #mainContent #infoBar2 h1 {padding: 6px 15px;}

  #mainContent #infoBar2 h1 span {

   font-weight: normal; 

   padding-left: 78px;

   color: #666;

  } 




/*-------------------------------------------Left Nav & Right Nav---*/




  * html #mainContent table  {width: 100%;} /* Hack for IE 6 and below */

  #mainContent table  {

   background-color: #fff;
   padding: 3px 15px 10px 22px;

   margin-bottom: 10px;   
   border: 1px solid #8AD12B;
   width: 100%;

   list-style: none;



  }


  #mainContent table td {

   padding: 0px 4px 4px 10px;

   margin-bottom: 0.20em;

   color: #7d7d7d;

   font-size: 85%;

  }

  #mainContent table td a {color: #6EA427;font-size: 120%;}

</style>


<body>  <!--Main Content-->
        <div id="mainContent">
            <div id="topNav">
                <h1>Find great things.. </h1>
                <div id="topNav3">
                    Find  great things
                    <br/>
                </div>                      
            </div>          
            <div id="infoBar2">
                <h1>a</h1>  
            </div>      
            <table>
                <tr>
                    <td><a href="#">asd</a></td>
                </tr>
            </table>    

            <div id="infoBar2">
                <h1>b</h1>  
            </div>  
            <table>
                <tr>
                    <td><a href="#">bcv</a></td>
                </tr>
            </table>        </div>

<!--//Wrapper-->
</body>

Answer 1

一些可能的补救措施：

CSS边距

该表可以设置一个div不设置的边距。试试这个css：

table {
    margin: 0px;
}

编辑：或者如果您的div是具有边距的div，请在上面的css中将table替换为div。

CSS Box-Model

不同的CSS盒子模型之间存在差异，例如Mozilla Firefox默认使用content-box model。将边框应用于元素时，这可能会产生令人困惑的结果。我相信IE默认使用边框模型。

要“清理”盒子模型，您可以将其添加到CSS：

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这会将Mozilla和CSS3兼容浏览器中所有html元素的框模型设置为border-box。

Answer 2

这种情况正在发生，因为你的“找到好东西......”div是一个额外的div。为了解决这个问题，该表需要进入另一个具有1px边框样式的div，float：left，width：100％和1px的边框。此外，当执行此操作时，请将边框从桌面上取下，因为新div将处理它。看看我下面的内容，这应该给你一个很好的例子。

 #mainContent #infoBartest {
      border: 1px solid #8AD12B;
      border-bottom: 0px;
      float: left;
      width: 100%;
     }

    <div id="mainContent">
       <div id="topNav">
        <h1>Find great things.. </h1>
        <div id="topNav3">
         Find  great things
         <br/>
        </div>      
       </div>   
       <div id="infoBar2">
        <h1>a</h1> 
       </div> 
   <div id="infoBartest">
    <table>
     <tr>
      <td>
      <a href="#">asd</a>
      </td>
     </tr>
    </table> 
    </div>
      </div>

Answer 3

检查边距和填充

您也可能想检查显示。我在某些浏览器中遇到了问题，如果没有设置为额外的像素，则将其添加到表中。

display: block;

div里面的表与div里面的div的大小不一样？

3 个答案:

CSS边距

CSS Box-Model