0

phpで生成されたギャラリーを作成したいと思います。このギャラリーでは、すべての画像がグレースケールで、マウスがその上を通過したときにのみ色が付けられます。さまざまな理由で、CSS画像の背景を使用したくなかったので、代わりに絶対位置の画像を使用しました。カーソルをテーブルのtd要素に合わせると、絶対位置の画像がグレー画像の上に表示されます。座標の長さや幅が定義されていないため、RGB画像は灰色の画像の真上に配置する必要があります。Firefoxではそれがまさに起こりますが、Chromeではすべての行の最初と2番目の画像が左にシフトされます。最後の3番目の画像は正常に機能します。

#main #album {
    width:100%; /* 600px */
}
#main #album  td{
    padding-bottom:20px;
    text-align:center;
}
#main #album  td img:first-child{   
    position:absolute;
    display:none;
}
#main #album  td:hover img:first-child{
    display:inline;
}
<table id="album">
<tr>
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />A
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />B
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />C
</table>

アップデート

diggersworldによって提案されたCSSリセットは問題を解決しましたが、私もリストを使おうとしましたが、それもうまくいきました。コードは次のとおりです。

#main #albumlist {
    width:100%; 
    list-style-type:none;
}
#main #albumlist a {
    float:left;
    display:block;
    width:180px;
    height:auto;
    padding-left:20px;  
    padding-bottom:20px;
    text-align:center;
}
#main #albumlist li a:first-child{
    padding-left:0;
}
#main #albumlist a img:first-child {
    position:absolute;
    display:none;
}
#main #albumlist a:hover img:first-child {  
    display:inline;
}

<ul id="albumlist"><li>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />A</a>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />B</a>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />C</a>
</li></ul>
4

1 に答える 1

0

動作の違いは、多くのことに起因する可能性があります。通常、主な問題は、ブラウザのデフォルト スタイルの違いです。これらのスタイルにはすべて定義済みのプリセット セットがあるためです。これらのプリセットは、リセット スタイルシートを使用して簡単にオーバーライドできます。これは基本的に、すべての CSS 属性を基本的な出発点にリセットし、すべてのブラウザーに構築するためのレベルの基盤を提供します。

http://meyerweb.com/eric/tools/css/reset/

コメントで、テーブルを使用することは理想的な解決策ではないことを述べました。テーブルは、90 年代にレイアウトのために一般的に使用されていました。しかし、それ以来、CSS はより便利になり、開発者はより少ない HTML でより多くのことを達成できるようになりました。

リストを使用する技術を確実に習得する必要があります。これらは、Web サイトを開発するときに最もよく使用する要素の 1 つです。それらを意味論的に分解すると、実際にリストであるものの数に驚かれることでしょう。また、テーブルよりもはるかに柔軟であり、レスポンシブ Web デザインを掘り下げると、大きなメリットが得られます.

于 2013-01-11T21:37:35.140 に答える