0

データベースからビデオ データを読み取り、多くのビデオとその関連情報をページに 5 行で表示するコードを作成しました。

サムネイルの下に動画のタイトルと再生回数が表示された動画のサムネイル画像として表示されるはずです。

私はFirefoxを使用していますが、表示すると想定どおりに見えます。ただし、Chrome で表示すると、動画のタイトルと再生回数が動画のサムネイル画像に重なって表示されます。

Firefoxと Chrome での表示例を次に示します 。

コードは 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 に答える