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>

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

我看到我的img和右边的盒子之间存在差距

1 个答案: