Question

http://www.cupiros.com/rental-long.html

关于此网页上的咖啡机图像，图像的大小在Chrome和IE11中有所不同。使用chrome调整图像大小可以很好地工作，但是在IE 11中，图像无法全屏显示。有人知道吗？这是我的第一篇作品，所以请理解我不了解HTML。

每张图像的大小：287 * 287
使用引导程序

这是我的CSS和HTML代码。

/*tab*/
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font awesome.min.css);
body { padding-top: 0px; }
.nav.nav-justified > li > a { position: relative; }
.nav.nav-justified > li > a:hover,
.nav.nav-justified > li > a:focus { background-color: transparent; }
.nav.nav-justified > li > a > .quote {
    position: absolute;
    left: 0px;
    top: 0;
    opacity: 0;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: #13c0ba;
    border-radius: 15px; 
    color: #fff;  
}
.nav.nav-justified > li.active > a > .quote { opacity: 1; }
.nav.nav-justified > li > a > img { box-shadow: 0 0 0 0px #13c0ba; }
.nav.nav-justified > li > a > img { 
    max-width: 100%; 
    opacity: 0.7;  
    -webkit-transform: scale(0.8,0.8); 
        transform: scale(0.8,0.8);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img { 
    opacity: 1; 
    -webkit-transform: none;  
        transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);     
        transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
    .tab-pane .tab-inner { padding: 30px 0 20px; }     
    @media (min-width: 768px) {                                   
    .nav.nav-justified > li > a > .quote {
        left: auto;
        top: auto;
        right: 20px;
        bottom: 0px;
    }  
}
/*tab 끝*/

  <!--col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3-->
        <div class="[ col-xs-12 col-sm-12 ]">
            <!-- Nav tabs -->
            <ul class="[ nav nav-justified ]" id="nav-tabs" role="tablist">
                <li role="presentation" class="">
                    <a href="#anna" aria-controls="anna" role="tab" data-toggle="tab">
                        <img class="img-rounded" src="images/CM1004_right.jpg" />
                        <!--
                        <span class="quote"><i class="fa fa-quote-left"></i></span>
                        -->
                        <p><br>< CM1004 ></p>
                    </a>
                </li>
                <li role="presentation" class="">
                    <a href="#daksh" aria-controls="daksh" role="tab" data-toggle="tab">
                        <img class="img-rounded" src="images/베누스타_right.jpg" />
                        <!--
                        <span class="quote"><i class="fa fa-quote-left"></i></span>
                      -->
                        <p><br>< VENUSTA - HQ ></p>
                    </a>
                </li>
               <li role="presentation" class="">
                    <a href="#new" aria-controls="new" role="tab" data-toggle="tab">
                        <img class="img-rounded" src="images/F11_right.jpg" />
                        <!--
                        <span class="quote"><i class="fa fa-quote-left"></i></span>
                      -->
                        <p><br>< Dr.Coffee - F11 ></p>
                    </a>
                </li>
                <li role="presentation" class="">
                    <a href="#dustin" aria-controls="dustin" role="tab" data-toggle="tab">
                        <img class="img-rounded" src="images/가찌아_right.png" />   <!--원본이미지 파일 (128*128) "https://s3.amazonaws.com/uifaces/faces/twitter/waferbaby/128.jpg"-->
                        <!--
                        <span class="quote"><i class="fa fa-quote-left"></i></span>
                        -->
                        <p><br>< GAGGIA - 싱크로니로직 ></p>
                    </a>
                </li>

            </ul>
        </div>

Answer 1

似乎正常的过渡和缩放属性不适用于IE。

尝试一下-对我有用

在以下属性中：

.nav-justified.nav > li.active > a > img, .nav-justified.nav > li:hover > a > img, .nav-justified.nav > li:focus > a > img

伴随

transform: none; transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);

添加以下代码

-ms-transform : none;-ms-animation: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);

有关说明，请查看：

图片大小在Chrome和IE 11中有所不同

1 个答案: