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);
    }
);

感谢帮助

Answer 1

像素舍入误差

h2 标签并不总是完全覆盖其下方的图像。黑线是图像中未​​被覆盖的部分。这是由于缩放内容时发生的像素舍入错误造成的。

有 2 个地方出现明显的像素舍入错误:

1. h2 标签的绝对定位。即使使用 top:0; left:0，这仍然会引入舍入误差。发生这种情况时，h2 会稍微偏移显示，因此它不会与 img 标签一致排列。
2. 将 h2 标签的总宽度拆分为 8% 用于组合水平填充，92% 用于内部内容。实际上，组合的 % 值在缩放时并不总是加起来为 100%。

其中任何一个本身都会导致 h2 标签和 img 标签之间出现不一致的舍入错误。这 2 个元素之间的不一致往往在视觉上很明显。

解决方案

Updated demo

避免这种不一致的关键概念是确保 h2 标签与 img 标签具有完全相同的舍入误差。没有切实可行的方法可以完全避免此类舍入错误，但只要它们在 2 个元素之间保持一致，在这种情况下它们就不会引人注意。

要修复 #1，请将 position:relative; 添加到 img 标签。 img 标签的相对定位中的任何舍入误差将与 h2 标签的绝对定位中的舍入误差一致(因为它们的定位是相对于同一元素的).这基本上消除了由绝对定位引起的舍入误差。

添加了 CSS

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

要修复 #2，请使用以下方法之一:

• 将 h2 标签的宽度更改为 100% 并添加 box-sizing: border-box;(以及 -moz- 和 -webkit- 版本).这won't work for IE7或更早。 Demo使用 box-sizing。
• 从 h2 标签中移除水平填充，并添加一个 text-indent 来模拟左侧填充(如果足够的话)。 Demo使用 text-indent。
• 去掉h2标签的水平内边距，在h2标签内外添加wrapper元素，外层元素width:% 100； position:absolute;，内部元素有 padding: 0 3% 0 5%;。通常，这将通过在 h2 标记内添加一个 span 来完成。

上述任何一种方法都可以防止发生这种特殊的舍入错误。 updated demo上面提到使用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 来注入(inject)包装元素。