Ширина ролловера div отличается от контейнера

У меня проблема с получением Chrome и Safari для правильного отображения div ролловера над моим изображением контейнера. То, что я сделал, иногда работает, но при изменении размера страницы иногда можно увидеть небольшой промежуток в 1 или 2 пикселя между ролловером div и контейнером изображений.

Я сделал демо здесь: 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);
    }
);

Спасибо за помощь

Источник

2 ответа

Решение

Ошибки округления пикселей

h2 тег не всегда полностью покрывает изображение под ним. Черная линия - это часть изображения, которая не покрыта. Это связано с ошибками округления пикселей, возникающими при масштабировании контента.

Есть 2 места, где происходит заметная ошибка округления пикселей:

  1. Абсолютное позиционирование h2 тег. Даже при использовании top:0; left:0это все еще может привести к ошибке округления. Когда это происходит, h2 отображается с небольшим смещением, так что он не совпадает с img тег.
  2. Разделение общей ширины h2 отметьте 8% для комбинированного горизонтального заполнения и 92% для внутреннего содержимого. По сути, объединенные значения% не всегда составляют до 100% при масштабировании.

Любой из них сам по себе вызывает непоследовательные ошибки округления между h2 тег и img тег. И несоответствия между этими двумя элементами, как правило, заметны визуально.

Решения

Обновленная демоверсия

Ключевой концепцией для избежания этой несогласованности является обеспечение того, чтобы h2 тег имеет те же ошибки округления, что и img тег. Нет практического способа полностью избежать ошибок округления такого рода, но пока они согласованы между двумя элементами, они не будут заметны в этом случае.

Чтобы исправить #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 для добавления элемента-оболочки.

Источник

Я немного изменил ваш CSS и переместил некоторые свойства CSS, чтобы сосредоточить ваши контейнеры ссылок внутри #related_projects, У ссылок не было 100% ширины и высоты их содержимого, как у вас.

Этот код работает для меня, дайте мне знать, если это то, что вы искали. Вы должны были бы исправить свои поля, хотя.

Кроме того, вместо того, чтобы помещать отступ в тег h2, я изменил вашу разметку и поместил ее в промежутки внутри h2.

обновленный jsFiddle

Изменить: проблемы исправлены в Chrome, однако вы все еще можете увидеть это в Safari.

Edit2: обновлен jsFiddle, я не вижу проблемы с моей стороны как в Chrome, так и в Safari

Источник
Другие вопросы по тегам