ios - 我看到我的 img 和我的右框之间有间隙

Question

在 iPhone 和 iPad 上查看时，我无法正确显示我的网站。在我尝试过的每个桌面浏览器(safari、chrome、firefox)上查看时，该网站都能正常显示，但是，在 iPhone/iPad 上，IMG 和右框之间有一个微小的间隙/空间。 它在 Firefox 中运行良好。问题是什么？ 这是指向 JsFiddle 的内嵌链接.

<div id="wrapper">
    <img src="http://dummyimage.com/155x155/000/fff"/>
    <div id="subject">
        <div id="subject_wrapper">
            <span>Im span</span>
            <span>im spanfdnf</span>
        </div>
    </div>
</div>



#wrapper {
    border-top: 8px solid #457b91;
    max-width: 488px;
    margin: 0 auto;
    overflow: hidden;
}

#wrapper img {
    width: 32%;
    float: left;
}

#subject {
    background-color: green;
    float: right;
    width: 68%;
    padding-bottom: 32%;
    position: relative;
}

#subject_wrapper {
    padding-top: 12%;
    position: absolute;
    height: 100%;
    width: 100%;
}

#subject span {
    font-family: Thonburi;
    font-size: 34px;
    color: #ffffff;
    display: block;
    padding: 0 20%;
}

#subject span:nth-child(2) {
    font-size: 18px;
    line-height: 8px;
}

Answer 1

我手边没有 iPd 或 iPhone 来检查这个，但请尝试注释掉元素之间的空间，因此:

<div id="wrapper">
    <img src="http://dummyimage.com/155x155/000/fff"/><!--
    --><div id="subject">
        <div id="subject_wrapper">
            <span>Im span</span>
            <span>im spanfdnf</span>
        </div>
    </div>
</div>

这是一个非常荒谬的修复，但它适用于内联 block 元素，例如由 LI 组成的菜单。