php - DIV 重叠图像而不是在 Chrome 中位于下方，在其他浏览器中看起来正确

Question

我构建了一个代码，从数据库中读取视频数据，并在页面上以 5 行的形式显示许多视频及其相关信息。

它应该显示为视频缩略图，缩略图下方有视频标题和观看次数。

我使用 Firefox，当我查看它时，它看起来就像它应该的那样。但是，当使用 Chrome 观看时，视频标题和观看次数与视频缩略图重叠。

以下是它在 Firefox 和 Chrome 中的外观示例:http://i.imgur.com/PgJkaYG.jpg (我没有足够的声誉点数来上传 2 张图片，所以我合并了它们)

代码使用 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

Answer 1

很多内联样式不好!请使用 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; .这解决了它。