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

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

这段代码对我有用，如果这就是你要找的，请告诉我。不过，您将不得不修正您的利润。

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

更新了 jsFiddle

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

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

score 1 · Accepted Answer

像素舍入误差

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

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

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

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

解决方案

更新的演示

避免这种不一致的关键概念是确保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.
从h2标签中删除水平填充，并添加一个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