html - ロールオーバー div の幅がコンテナーとは異なります

Question

Chrome と Safari で、コンテナーイメージの上にロールオーバー div を正しく表示する際に問題が発生しています。私が行ったことは時々うまくいきますが、ページのサイズを変更すると、ロールオーバー div と画像コンテナの間に 1 ～ 2 ピクセルの小さなギャップが見られることがあります。

ここでデモを作成しました: http://jsfiddle.net/eJNsS/9/

スクリーンショット ここに画像の説明を入力

HTML

<div id="related_projects">
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image"  /></div><h2 class="transparent_font">IMG1</h2></div></a>          
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image"  /></div><h2 class="transparent_font">IMG2</h2></div></a>          
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image"  /></div><h2 class="transparent_font">IMG3</h2></div></a>          
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG4</h2></div></a>           
    <a href=# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG5</h2></div></a>            
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG6</h2></div></a>           
    <a href=# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG7</h2></div></a>

CSS

#related_projects {
    background-color :#FFFF44;
    margin-bottom: 20px;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    margin-bottom: 20px;
    display: block;
    margin-top: 2%;
}
#related_projects .thumbnail_image_related_project {
    width: 23%;
    position: relative;
    float: left;
    top: 0;
    left: 0;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 0%;
    margin-bottom: 2%;
    overflow: hidden;
    line-height: 0;
}
#related_projects img {
    width: 100% !important;
    height: auto;
}
#related_projects p, #categories_container #left p {
    text-align: left;
    color: black;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
    line-height: 23px;
    margin-bottom: 20px;
}
#link_description {
    float: left;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
}
#link_description #link {
    width: 50%;
    float: right;
    color: black;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
    line-height: 23px;
}
#link_description #link a {
    color: #666666;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
}
#link_description #link a:hover {
    color: #22B573;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
}

/* THUMBNAIL PICTURES
-------------------------------------------------------------- */

.thumbnail_image_related_project .transparent_font {
    line-height: 1.25em;
    position: absolute;
    top: 0;
    left: 0;
    color: black;
    background-color:white; 
    width: 92%;
    padding-right: 3%;
    height: 100%;
    padding-left: 5%;
    opacity:1;
    filter: alpha(opacity=0);
}
.thumbnail_image_related_project h2 {
    padding-top: 30px;
    text-align: left;
    color: black;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
    line-height: 23px;
}
h2 {
    margin:0px;
}

jQuery

$("#slider").hover(
    function(){
        $(".caption").stop().animate({'opacity' : '0.9'}, 200);
    },
    function(){
        $(".caption").stop().animate({'opacity' : '0'}, 100);
    }
);

$(".thumbnail_image_related_project").hover(
    function(){
        $(this).children(".transparent_font").stop()
               .animate({'opacity' : '0.7', 'padding-top': '10px'}, 300);
    },
    function(){
        $(this).children(".transparent_font").stop()
               .animate({'opacity' : '0', 'padding-top': '30px'}, 300);
    }
);

助けてくれてありがとう

score 1 · Accepted Answer

ピクセルの丸め誤差

タグは常にそのh2下の画像を完全に覆っているわけではありません。黒い線は、カバーされていない画像の部分です。これは、コンテンツのスケーリング時に発生するピクセルの丸め誤差によるものです。

顕著なピクセルの丸め誤差が発生している場所が 2 つあります。

h2タグの絶対位置。を使用している場合top:0; left:0でも、丸め誤差が発生する可能性があります。この場合、h2はわずかにずれて表示されるため、imgタグと一貫して整列されません。
タグの合計幅を、h2水平方向のパディングの合計の 8% と内部コンテンツの 92% に分割します。実際には、結合された % 値は、スケーリングされたときに常に 100% になるとは限りません。

h2これらのいずれかが原因で、タグとタグの間で一貫性のない丸め誤差が発生しますimg。また、この 2 つの要素の間の不一致は、視覚的に目立つ傾向があります。

ソリューション

更新されたデモ

この不一致を回避するための重要な概念は、h2タグがタグとまったく同じ丸め誤差を持つようにすることimgです。この種の丸め誤差を完全に回避する実際的な方法はありませんが、2 つの要素間で一貫性がある限り、この場合は目立ちません。

#1 を修正するには、タグに追加position:relative;します。imgタグの相対位置のimg丸め誤差は、タグの絶対位置の丸め誤差と一致しますh2(それらの位置は同じ要素に相対的であるため)。これにより、絶対配置によって生じる丸め誤差が実質的に相殺されます。

CSSが追加されました

#related_projects img {
    position: relative;
    ...
}

#2 を修正するには、次のいずれかの方法を使用します。

タグの幅h2を 100% に変更して追加box-sizing: border-box;します (-moz- および -webkit- バージョンも同様)。これは IE7以前では機能しません。を使ったデモbox-sizing。
タグから水平方向のパディングを削除し、h2a を追加しtext-indentて左のパディングをシミュレートします (それで十分な場合)。を使ったデモtext-indent。
タグから水平パディングを削除し、h2タグの内側または外側にラッパー要素を追加します。h2外側の要素はwidth:%100; position:absolute;、内側の要素はpadding: 0 3% 0 5%;です。通常、これはh2タグ内にスパンを追加することによって行われます。

上記のアプローチのいずれかにより、この特定の丸め誤差が発生するのを防ぐことができます。上記の更新されたデモでは、box-sizing. IE7 以前のサポートが必要ない限り、これはおそらく #2 の最も洗練された修正であり、HTML 要素を追加する必要はありません。

CSS を削除しました

.thumbnail_image_related_project .transparent_font {
    width: 92%;
    ...
}

CSSが追加されました

.thumbnail_image_related_project .transparent_font {
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    ...
}

IE7 以前のサポートが必要であり、text-indent十分ではなく、静的 HTML を編集できない場合は、JavaScript または jQuery を使用してラッパー要素を挿入します。

html - ロールオーバー div の幅がコンテナーとは異なります

2 に答える 2

ピクセルの丸め誤差

ソリューション

Related

Reference