모르겟다
10
2019-02-05 23:58:57
3
490

크롬, 익스플로러 CSS 차이


안녕하세요. 간단한 문제 도움 요청드립니다.

제가 현재 간단한 웹사이트를 만들고 있는데 크롬에서는 잘 잘적용되는 스타일이 익스플로러에서는 적용이 안돼서요ㅎㅎ 아래 이미지와 코드 확인 부탁드립니다.

왼쪽이 크롬에서 보았을 때, 오른쪽이 인터넷 익스플로러에서 보았을 때 입니다.


익스플로러에서도 왼쪽 이미지 처럼 보이게 하고 싶은데.. 제가 처음 보는거라 잘 모르겠어서 도움 요청드립니다. 아래 코드에서 무엇을 바꾸면 될까요? 감사합니다.


<HTML>

   <div class="[ col-xs-12 col-sm-12 col-md-12 col-lg-10 col-lg-offset-1 ]" role="tabpanel">
    <button type="" id="" name="" class="btn btn-primary">커피 머신 소개</button>
  
      <!--col-xs-12 col-sm- <div class="[ col-xs-12 col-sm-12 ]">
          8 col-sm-offset-2 col-md-6 col-md-offset-3-->
                 <!-- 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>

<CSS>


/*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;   /*hover 안했을 시 이미지 선명함 , 원래 0.3*/
    -webkit-transform: scale(0.8,0.8); /*이미지 괄호 : (가로, 세로), 이미지 크기 :128, 128*/
            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);
    -ms-transform: scale(0.8,0.8); /*이미지 괄호 : (가로, 세로), 이미지 크기 :128, 128*/
            transform: scale(0.8,0.8);
    -ms-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;  /*hover시 이미지 크기 원래 "none;"*/"
            transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);     /*원래 0.3*/
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transform: none;  /*hover시 이미지 크기 원래 "none;"*/"
            transform: none;
    -ms-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);     /*원래 0.3*/
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);        
}
.tab-pane .tab-inner { padding: 30px 0 20px; }      /*원래 30 0 20*/
@media (min-width: 768px) {                                   
    .nav.nav-justified > li > a > .quote {
        left: auto;
        top: auto;
        right: 20px;
        bottom: 0px;
    }  
}
/*tab 끝*/



0
0
  • 답변 3

  • Eric Lee
    191
    2019-02-06 00:14:18

    흠...뭘 원하는지 몇번을 봐도 도통 이해가 안되네요.

    뭘 어케 해달라는건지...나만 이해 못하는건가요???

    본인이 직접 작성한 소스인가요? 본인이 직접 작성한 코드라면 어느 부분이 크롬과 IE에서 차이가 나는지 알텐데요 아니 알아야 정상일텐데요. 그럼 어디어디 부분이 크롬에서는 먹는데 IE에서는 안먹는다 어떻게 고쳐야 하느냐...또는 어떠어떠한 명령어가 IE에서는 어떻게 처리하느냐 등등 구체적으로 질문을 올려야하지 않을까요? 

    그저 저 개인적인 생각입니다만 손안대로 코풀라는 느낌이 드는군요.



    2
  • kenu
    44k
    2019-02-06 09:54:39

    https://okky.kr/article/378798

    https://stackoverflow.com/questions/33238792/difference-in-height-css-in-ie-vs-chrome


    0
  • 나도아빠다
    2k
    2019-02-06 13:36:29

    크로스브라우징이라니.. 전혀간단하지 않은 문제인데..

    간단하니 해주세요..라니 더더욱 보고싶지않습니다..


    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.