Разное поведение простых вещей в разных браузерах

188

22 мая 2018, 03:50

https://codepen.io/anon/pen/JvBVRq

* { 
  margin: 0; 
	padding: 0; 
  box-sizing: border-box; 
} 
 
html, body, #wrapper { 
	height: 100%; 
} 
 
#wrapper { 
 width: 100%; 
} 
 
#left { 
  padding: 55px; 
	width: 20%; 
	height: 100%; 
  float: left; 
  overflow-x: auto; 
} 
 
#right { 
  float: right; 
  width: 80%; 
  height: 100%; 
  background-color: #474747; 
}

<div id="wrapper"> 
  <div id="left"> 
    <div class="runeword-item"> 
      <div>Item 1</div> 
      <div>Item 1</div> 
      <div class="lvl">bal bal 1</div> 
      <div class="sockets">bla bla 1</div> 
    </div> 
    <div class="runeword-item"> 
      <div>Item 2</div> 
      <div>Item 2</div> 
      <div class="lvl">bal bal 2</div> 
      <div class="sockets">bla bla 2</div> 
    </div> 
    <div class="runeword-item"> 
      <div>Item 3</div> 
      <div>Item 3</div> 
      <div class="lvl">bal bal 3</div> 
      <div class="sockets">bla bla 3</div> 
    </div> 
    <div class="runeword-item"> 
      <div>Item 4</div> 
      <div>Item 4</div> 
      <div class="lvl">bal bal 4</div> 
      <div class="sockets">bla bla 4</div> 
    </div> 
    <div class="runeword-item"> 
      <div>Item 5</div> 
      <div>Item 5</div> 
      <div class="lvl">bal bal 5</div> 
      <div class="sockets">bla bla 5</div> 
    </div> 
  </div> 
  <div id="right">123456789</div> 
</div>

В chrome отображается все как нужно, но в mozilla firefox, ie и edge, нету нижнего padding у id="left"...

Почему так происходит, это баг mozilla firefox, ie и edge, или просто я что то не так сделал?

Answer 1

Padding на самом деле есть и работает исправно. проверить это можно, если создать внутри #left элемент, который займет всю высоту.

Пример. Смотреть на полной странице.

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body, 
#wrapper { 
  height: 100%; 
} 
 
#wrapper { 
  width: 100%; 
} 
 
#left { 
  padding: 55px; 
  width: 20%; 
  height: 100%; 
  float: left; 
  overflow-x: auto; 
} 
 
#leftwrapper{ 
  background-color:red; 
  height:100%; 
} 
 
#right { 
  float: right; 
  width: 80%; 
  height: 100%; 
  background-color: #474747; 
}

<div id="wrapper"> 
  <div id="left"> 
    <div id="leftwrapper"> 
      <div class="runeword-item"> 
        <div>Item 1</div> 
        <div>Item 1</div> 
        <div class="lvl">bal bal 1</div> 
        <div class="sockets">bla bla 1</div> 
      </div> 
      <div class="runeword-item"> 
        <div>Item 2</div> 
        <div>Item 2</div> 
        <div class="lvl">bal bal 2</div> 
        <div class="sockets">bla bla 2</div> 
      </div> 
      <div class="runeword-item"> 
        <div>Item 3</div> 
        <div>Item 3</div> 
        <div class="lvl">bal bal 3</div> 
        <div class="sockets">bla bla 3</div> 
      </div> 
      <div class="runeword-item"> 
        <div>Item 4</div> 
        <div>Item 4</div> 
        <div class="lvl">bal bal 4</div> 
        <div class="sockets">bla bla 4</div> 
      </div> 
      <div class="runeword-item"> 
        <div>Item 5</div> 
        <div>Item 5</div> 
        <div class="lvl">bal bal 5</div> 
        <div class="sockets">bla bla 5</div> 
      </div> 
    </div> 
  </div> 
  <div id="right">123456789</div> 
</div>