翻转 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 标签并不总是完全覆盖它下面的图像。黑线是图像中未​​被覆盖的部分。这是由于缩放内容时出现的像素舍入误差。

有两个地方会出现明显的像素舍入误差：

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

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

解决方案

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 标记内部或外部添加一个包装元素，外部元素为width:%100; position:absolute;，内部元素为padding: 0 3% 0 5%;。通常，这可以通过在 h2 标记内添加一个跨度来完成。

上述任何一种方法都可以防止发生这种特殊的舍入误差。上面提到的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 注入包装器元素。

Answer 2

我稍微更改了您的 CSS 并移动了一些 CSS 属性以将您的链接容器集中在 #related_projects 中。链接的内容宽度和高度没有您所拥有的 100%。

此代码适用于我，如果您正在寻找，请告诉我。不过，您必须修正利润。

另外，我没有将填充放在 h2 标记上，而是更改了您的标记并将其放在 h2 内的 span 上。

updated jsFiddle

编辑：问题已在 Chrome 中修复，但您仍然可以在 Safari 中看到它。

Edit2：更新了 jsFiddle，我在 Chrome 和 Safari 中都看不到问题