Размер таблиц внутри div не такой же, как у div внутри? - PullRequest
Новая
       10

Размер таблиц внутри div не такой же, как у div внутри?

0 голосов
/ 04 марта 2010

Когда я устанавливаю внешний div на 100%, а внутренний div и table на 100%, размер внутренней таблицы отличается от внутреннего div. Внутренний стол справа примерно на 2 пикселя меньше. Кто-нибудь знает, почему это происходит?

Также на 2-й таблице в 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>

Ответы [ 3 ]

1 голос
/ 04 марта 2010

Это происходит потому, что ваш "найди великие вещи ..." div находится внутри дополнительного div. Чтобы исправить это, таблица должна пройти внутрь другого div со стилем, имеющим границу 1px, float: left, width: 100% и border 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>
1 голос
/ 04 марта 2010

Некоторые возможные средства правовой защиты:

CSS поля

таблица может иметь установленное поле, которого нет у div. Попробуйте это CSS: 

table {
    margin: 0px;
}

РЕДАКТИРОВАТЬ: Или, если ваш div с полем, замените table на div в приведенном выше CSS.

CSS Box-модель

Существуют различия между различными блочными моделями CSS, например, Mozilla Firefox по умолчанию использует модель content-box . Это может привести к путанице при применении границ к элементам. Я считаю, что IE использует модель рамки по умолчанию.

Чтобы «очистить» блочную модель, вы можете добавить это в свой CSS: 

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

Устанавливает блочную модель на border-box для всех HTML-элементов в браузерах, совместимых с Mozilla и CSS3.

0 голосов
/ 04 марта 2010

проверить поля и отступы

Вы также можете проверить отображение.У меня были проблемы в некоторых браузерах с добавлением дополнительных пикселей в таблицы, если они не были установлены в.

display: block;
...