Question

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

它应该显示为视频缩略图，视频标题和缩略图下方的视图数量。

我使用的是Firefox，当我查看它时，它看起来应该是它。但是，使用Chrome浏览器时，视频标题＆amp;视图计数与视频缩略图图像重叠。

以下是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

在你的样式部分（CCS）中有一个名为＆＃34; display：inline-block＆＃34;删除此行。希望你能解决问题。

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

Answer 2

许多内联样式错误！请使用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;。这解决了它。

DIV重叠图像而不是在Chrome下面，在其他浏览器中看起来正确

2 个答案: