проблема css на firefox, границы не отображаются правильно

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

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

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

Answer 3

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

ссылка

от того, что я получил Soln. сделать переполнение div: скрыто, и у меня все заработало.

Answer 4

Хорошо, похоже, это классическое несоответствие бок-модели IE (или, скажем так, ошибка?)

Самый простой способ обойти это - определить ваш div (тот, который содержит ddd) внутри контейнера div, как это:

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

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

#container
{
  width:100%;
}

.forDiv
{
  border: 3px solid;
}

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

Answer 5

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