DIV重疊的，而不是在Chrome底下去圖像，看起來在其他瀏覽器正確

我構建了一個讀取數據庫中的視頻數據，並顯示許多影片，並在頁面上排5DIV重疊的，而不是在Chrome底下去圖像，看起來在其他瀏覽器正確

這是他們的相關信息的代碼應該顯示爲縮略圖下方的視頻標題和查看計數的視頻縮略圖。

我使用Firefox，它看起來應該是當我查看它。但是，使用Chrome查看時，視頻標題&視圖計數與視頻縮略圖圖像重疊。

這裏是它的外觀在Firefox和Chrome的例子：http://i.imgur.com/PgJkaYG.jpg （我沒有足夠的信譽分上傳4張圖片，所以我合併他們）

的代碼是在PHP和讀取一個MySQL數據庫：

<DIV id="wrapper"> 
<div style="background-color: #FFF;height:auto;"> 
<div class="videos" style="margin-top:2px;text-align:left;"> 
<div style="margin-left:50px;margin-right:5px;margin-top:-5px;"> 

<br /><div style="width:855px;"><ul> 

$result=mysql_query("SELECT * FROM videos order by ID DESC LIMIT $from, $max_results "); 

while ($i = mysql_fetch_array($result)) 
{ 
    $id = $i["ID"]; 
    $title = $i["title"]; 
    $youtube = $i["youtube"]; 
    $date = $i["date"]; 
    $category = $i["category"]; 
    $description = $i["description"]; 

    $video_ID = $youtube; 
    $JSON = file_get_contents("https://gdata.youtube.com/feeds/api/videos/{$video_ID}?v=2&alt=json"); 
    $JSON_Data = json_decode($JSON); 
    $views = $JSON_Data->{'entry'}->{'yt$statistics'}->{'viewCount'}; 

if ($currentdate != $date) { 
    $currentdate = $date; 
    $date = date("F d, Y",strtotime($date)); 
    echo "</ul><h2><span style='text-transform:uppercase;'>$date</span></h2><br /><ul>"; 
} 

echo "<li style='width:170px;'> 
<a href='video.php?v=$youtube' style='margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;'> 
<img border='0' src='http://img.youtube.com/vi/$youtube/hqdefault.jpg' height='100' width='160' /></a>&nbsp;<br /> 

<div style='text-align:left;vertical-align: bottom;width:160px;height:50px;'> 
<strong>$title</strong> 
<br />Views: $views</div> 
<br /><br /> 
</li>"; 

} 

</div></ul></div> 
</div> 
</DIV>

我以前沒有專門爲Chrome瀏覽器編寫代碼。所以我不知道如何修改我的代碼來解決這個問題，所以它看起來像上面的Firefox例子。

如果任何人可以借出任何幫助，將不勝感激。 http://justinterviews.org

來源

2013-03-06 noland

只是一個fyi，你不應該使用mysql_ *檢查這個瞭解更多信息。 http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php – 2013-03-06 05:00:41

很多內嵌樣式是壞！請使用CSS文件。

對於您的問題，替換：

<a href="video.php?v=CRDZ4uCNs3I" style="margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;"> 
        <img border="0" src="http://img.youtube.com/vi/CRDZ4uCNs3I/hqdefault.jpg" height="100" width="160"></a>

有了：

<a href="video.php?v=CRDZ4uCNs3I" style="display: inline; margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;"> 
        <img border="0" src="http://img.youtube.com/vi/CRDZ4uCNs3I/hqdefault.jpg" height="100" width="160"></a>

對於所有<a>標籤。 display: inline-block;需要更改爲display: inline;。這解決了它。

來源

2013-03-06 05:06:59

太棒了！謝謝！我知道這將是簡單的大聲笑。 – noland 2013-03-06 05:09:46

另外，我知道比使用這麼多內聯樣式更好，不用擔心！這只是暫時的，直到我完成這部分我正在努力哈哈。然後我會清理它:) – noland 2013-03-06 05:11:40

清理比從頭開始更糟糕。由經驗。 :) – 2013-03-06 05:14:58

在您的樣式節（CCS）有一個叫做財產「顯示：inline-block的」刪除此行

如果要查看在行動現場謝謝

。希望你能解決問題。

a:link,a:visited { 
    display:inline-block; (Remove this line) 
}

來源

2013-03-06 05:03:25

DIV重疊的，而不是在Chrome底下去圖像，看起來在其他瀏覽器正確

回答

相關問題