我看到我的img和我的右邊框之間存在差距

我在使用iPhone和iPad查看我的網站時顯示不正常。在我嘗試過的每個桌面瀏覽器（safari，chrome，firefox）上查看時，該網站都能正常顯示，但是，在iPhone/iPad上，IMG和右邊框之間有一個微小的間隙/空間。它在Firefox中正常工作。問題是什麼？這是一個內聯鏈接JsFiddle。我看到我的img和我的右邊框之間存在差距

<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; 
}

來源

2013-10-24 user2916693

您是否在桌面上的safari中測試它？你會看到差距/空間 – user2916693

我沒有一個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組成的菜單。

來源

2013-10-24 16:49:54

你的意思是什麼？我不明白 – user2916693

好吧，除非我誤解了你，否則你沒有想到的元素之間存在一個小小的差距？通常，這種意想不到的差距是代碼中實際空白的結果，它插入單個空格字符，就好像元素是文本流的一部分。註釋元素之間的差距可以解決此問題，也可以將空格設置爲0的字體大小或將每個元素彼此對齊。下面是一個筆來解釋：http://cdpn.io/bFLus 我可能誤解了，在這種情況下，我很抱歉，我沒有機會在IOS設備上看小提琴 –

我看到我的img和我的右邊框之間存在差距

回答

相關問題