항목 설명을 표시하는 호버 효과를 갖도록 3 개의 열이있는 선을 만들려고합니다.
Google 크롬에서 첫 번째 항목을 가리키면 두 번째와 세 번째 열 사이에 간격이 나타납니다. Mozilla Firefox에서는 열이 3 개가 아닌 4 개 또는 2 개일 때 동일한 일이 발생하며 마지막 두 항목 사이에 간격이 나타납니다.
마크 업
<div class="row row-3">
<div class="column">
<img src="http://placehold.it/800x650" alt="" class="image" />
<div class="info">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div><!-- .info -->
</div><!-- .column -->
<div class="column">
<img src="http://placehold.it/800x650" alt="" class="image" />
<div class="info">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div><!-- .info -->
</div><!-- .column -->
<div class="column">
<img src="http://placehold.it/800x650" alt="" class="image" />
<div class="info">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div><!-- .info -->
</div><!-- .column -->
</div><!-- .row -->
CSS
body {
font: normal 0.7em sans-serif; }
.row {
width: 100%; }
.image {
max-width: 100%; }
.info {
background: rgba(0, 0, 0, .5);
color: #FFF;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all .3s linaer;
width: 100%;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear; }
.column:hover .info {
opacity: 1; }
}
.column {
position: relative; }
.row-3 .column {
float: left;
width: 33.333333%; }
나는 문제를 보여주기 위해 바이올린을 만들었다 : http://jsfiddle.net/q5z4B/1/
문제는 너비로 사용하는 33.333333 %입니다. 브라우저는 이미지가 컨테이너를 채우는 데 필요한 "33.33333 %"의 "100 %"를 계산하는 데 시간이 걸립니다.
아마도 이미지 너비를 100 %의 100.1 %로 변경하면 작동 할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다