css issue on firefox, border not show правильно

Question

У меня проблема с firefox, в то время как все IE, Safari и Chrome работают.

<div class="forDiv">ddd</div> 
<table class="forTable"> .... </table> 


.forDiv { 
width:100%; 
border:3px solid #236FBD; 
background-color: #236FBD; 
} 

.forTable{ 
width:100%; 
border:3px solid #236FBD; 
background-color: #236FBD; 
} 

в firefox, div немного меньше. как я могу это исправить?

Answer 1

.forDiv { 
width:100%; 
border:3px solid #236FBD; 
background-color: #236FBD; 
-moz-box-sizing: border-box; 
} 

.forTable{ 
width:100%; 
border:3px solid #236FBD; 
background-color: #236FBD; 
-moz-box-sizing: border-box; 
} 

Answer 2

Это несоответствие в том, как разные браузеры обрабатывать атрибут ширина - включают ли они размеры границы/накладку в ширину, или считают ли они им дополнительные.

Вы можете использовать атрибут -moz-box-sizing, установленный в «border-box», чтобы сообщить браузеру на основе Mozilla для эмуляции того, как IE работает в режиме quirks (подробнее см. this page).

Answer 3

Скорее всего, что-то связано с полями или дополнениями, расположенными в соседних или содержащих элементах. Трудно сказать без полного контекста, но попробуйте установить атрибуты margin и padding для div и таблицы и посмотреть, что произойдет.

Answer 4

Хорошо, это, кажется, классический IE коробчатого модель несогласованность (или я должен сказать, ошибка?)

Самый простой способ вокруг него, чтобы определить ваш DIV (один содержащий ДДД) внутри контейнера DIV как это:

<div id="container"> 
    <div class="forDiv">ddd</div> 
</div> 

и определить свойства CSS следующим образом:

#container 
{ 
    width:100%; 
} 

.forDiv 
{ 
    border: 3px solid; 
} 

Это должно дать вам тот же размер, как в IE и Gecko.

Answer 5

Попробуйте переполнение: скрыто; У меня тоже была такая же проблема. Затем я получил эту

link

от я получил SOLN. чтобы сделать переполнение div: спрятано, и это сработало хорошо для меня.