html - CSS 布局问题(图像两侧各有一个按钮)

Question

我有两个问题:首先是为什么这个 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>