Проблема с макетом CSS (1 кнопка с каждой стороны изображения)

Question

У меня есть 2 номера: Во-первых, почему этот HTML визуализируется по-разному в IE и Chrome Во-вторых, как выровнять 2 кнопки так, чтобы они были той же высоты, что и изображение и флеш рядом с ним с обеих сторон.

http://jsfiddle.net/ur23z7f0/3/

<div class="wrapper"> 
    <div class="button-wrapper"> 
     <input type="submit" value "1"/> 
    </div> 
    <div class="image-wrapper"> 
     <img src="http://2.bp.blogspot.com/_8LIsmeu9Fzs/SdadTd-wVDI/AAAAAAAAALA/9Pt_3nCrsz0/s400/BURGER.jpg" /> 
    </div> 
    <div class="button-wrapper"> 
     <input type="submit" value "2"/> 
    </div> 
</div> 

.wrapper { 
    display:inline-block; 
    height: 200px; 
    background-color: blue; 
} 
.image-wrapper { 
    display:inline-block; 
    height: 200px; 
    background-color: pink; 
    padding: 5px; 
} 
.button-wrapper { 
    display:inline-block; 
    height: 200px; 
    background-color: cyan; 
    padding: 5px; 
} 
img { 
    height: 200px; 
} 
input { 
    height: 200px; 
    width: 40px; 
} 

Благодаря

Answer 1

Использование display: inline-block вы должны позаботиться о вертикальном выравнивании. Общий размер элемента - его ширина/высота плюс дополнение плюс граница плюс маржа, поэтому для соответствия содержимому высота вашей обертки должна составлять 210 пикселей.

Ниже код является фиксированной и поэтому работает одинаково на разных браузерах:

.wrapper { 
 
    display:inline-block; 
 
    height: 210px; 
 
    background-color: blue; 
 
    vertical-align: top; 
 
} 
 
.image-wrapper { 
 
    display:inline-block; 
 
    vertical-align: top; 
 
    height: 200px; 
 
    background-color: pink; 
 
    padding: 5px; 
 
} 
 
.button-wrapper { 
 
    display:inline-block; 
 
    vertical-align: top; 
 
    height: 200px; 
 
    background-color: cyan; 
 
    padding: 5px; 
 
} 
 
img { 
 
    height: 200px; 
 
} 
 
input { 
 
    height: 200px; 
 
    width: 40px; 
 
}

<div class="wrapper"> 
 
    <div class="button-wrapper"> 
 
     <input type="submit" value "1"/> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
     <img src="http://2.bp.blogspot.com/_8LIsmeu9Fzs/SdadTd-wVDI/AAAAAAAAALA/9Pt_3nCrsz0/s400/BURGER.jpg" /> 
 
    </div> 
 
    <div class="button-wrapper"> 
 
     <input type="submit" value "2"/> 
 
    </div> 
 
</div>