0

我构建了一个代码，它从数据库中读取视频数据，并在页面上以 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

4

2 回答 2

0

在您的样式部分（CCS）中有一个名为“display：inline-block”的属性删除此行。希望你能解决问题。

a:link,a:visited {
   display:inline-block; (Remove this line)
}
于 2013-03-06T05:03:25.330 回答
0

很多内联样式都不好！请使用 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-06T05:06:59.270 回答