Question

我在让Chrome和Safari正确显示容器图片上方的翻转div时遇到问题。我所做的有时会起作用，但是当调整页面大小时，有时会在翻转div和图像容器之间看到1或2像素的小间隙。

截图 enter image description here

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

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

此代码适用于我，如果您正在寻找，请告诉我。但是你必须修复你的边距。

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

<强> updated jsFiddle

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

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

Answer 2

像素舍入错误

h2标记并不总是完全覆盖其下方的图像。黑线是图像中未覆盖的部分。这是由于缩放内容时出现的像素舍入错误。

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

h2标记的绝对定位。即使使用top:0; left:0，这仍然会引入舍入错误。发生这种情况时，h2会略微偏移显示，因此不会与img标记一致。
将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;，内部元素为{ {1}}。通常，这可以通过在padding: 0 3% 0 5%;标记内添加范围来完成。

上述任何一种方法都可以防止发生这种特殊的舍入错误。上面提到的updated demo使用了h2。只要不需要支持IE7或更早版本，这可能是＃2最优雅的修复，它不需要添加额外的HTML元素。

已删除CSS

box-sizing

添加了CSS

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

如果需要支持IE7或更早版本，并且.thumbnail_image_related_project .transparent_font { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ... }不合适，并且编辑静态HTML不是一个选项，那么使用JavaScript或jQuery注入包装元素。

翻转div的宽度与容器的宽度不同

2 个答案:

像素舍入错误

解决方案