Question

如果在点击不可能点击Chrome中的链接后显示后面的一个，我在前/后面有一个2个div。在Firefox中，这在Internet Explorer中运行良好，图像转过来，而且.back甚至都没有显示出来。

<div id="wrapper">
 <div class="flip-container">
  <div class="flipper">
   <div class="front">
    <img src="http://scontent-b.cdninstagram.com/hphotos-xpa1/t51.2885-15/1168351_470667406405412_2007681758_n.jpg">
    </div>
    <div class="back instagramback">
    <a href="http://instagram.com/aylinko24">
    <img src="http://photos-h.ak.instagram.com/hphotos-ak-xfa1/10665941_291892014336919_28842480_a.jpg">
    </a>
    <br>
    <a href="http://instagram.com/aylinko24">CGN ⭐19 ⭐ alevi⭐</a>
    <p> günaydiin #love #TagsForLikes #photooftheday #me #instamood #cute #igers #picoftheday #girl  #guy #beautiful #fashion #instagramers #follow #smile #pretty #followme #friends #hair #swag #photo   #life #funny #cool #hot #bored #portrait #baby #girls #iphonesia</p>
    </div>
   </div>
  </div>
</div>

css：

body{margin:0;padding:0;}
#wrapper{
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}
.flip-container{
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  background-color: whitesmoke;
}

@media (max-width: 1200px) {
  #bloemfies {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #bloemfies {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #bloemfies {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #bloemfies {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

.front img{
        max-width: 100%;
        height: auto;
        margin-top: 1em;
        margin-bottom: 1em;
}

.back{
    margin-top: 0.2em;
    height: 100%;
    width: 100%;
    line-height: 1.2;
    margin-left: 0.2em;
    margin-right: 0.2em;
}


/*Container flip*/


/* entire container, keeps perspective */
.flip-container {
        perspective: 1000;
}
        /* flip the pane when hovered */
        .flip .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
                transform: rotateY(180deg);
        }

/* flip speed goes here */
.flipper {
        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative !important;
}

/* hide back of pane during swap */
.front, .back {
        backface-visibility: hidden;

        top: 0;
        left: 0;
}

/* front pane, placed above back */
.front {
        /* for firefox 31 */
        transform: rotateY(0deg);
        margin: 1.2em;
}

/* back, initially hidden pane */
.back {
        transform: rotateY(180deg);
        position:absolute;
        margin-top: 1.2em;
        margin-bottom: 1.2em;
        margin-left: 20px;
        overflow: auto;
        word-break: normal;
        width: 90%;

        z-index: 1;
}

.instagramback{
    height: 90%;
}


/*Hover for shadow*/
.front img:hover{
    -webkit-box-shadow: 0px 0px 10px 10px lightgray;
    -moz-box-shadow: 0px 0px 10px 10px lightgray;
    box-shadow: 0px 0px 8px 8px lightgray;
}

如果我给.back z-index：100000000000我仍然无法点击链接有人知道为什么吗？有没有人知道为什么图像只是转身而且.back甚至没有出现在Internet Explorer中？

谢谢！

为什么我无法点击这些链接？在<div> Html / Css </div>中

0 个答案: