>source

인터넷 익스플로러와 호환되는 웹 사이트를 만들고 있습니다. CSS 해킹에서 인터넷 익스플로러의 웹 사이트를 어떻게 확장합니까?

먼저 파이어 폭스를 위해 웹 사이트를 코딩했습니다. 그래서 일부 브라우저에서 일부 CSS 해킹을 사용했습니다. 이제 인터넷 익스플로러로 시작한 다른 브라우저에서 웹 사이트를 확장하고 싶었습니다. 인터넷 익스플로러를 식별하기 위해 CSS 해킹에 미디어 쿼리를 사용했지만 웹 사이트를 확장하려면 다른 미디어 쿼리가 필요합니다. 인터넷 익스플로러를 식별하는 미디어 쿼리를 이미 '추가'하려고 시도한 후 min-width 로 복사했습니다.  600, 768 및 998이지만 min-width: 600px 와 함께 작동했습니다.  다른 미디어 쿼리는 무시했습니다. 인터넷 익스플로러에서 웹 사이트를 확장 (또!)하는 또 다른 방법이 있습니까? 아니면 잘못 코딩 했습니까? 또한 미디어 쿼리를 사용하지 않았지만 여전히 작동하지 않는 크롬과 동일한 질문이 있습니다.

/*IE*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    img.Marat {max-width: 13%;margin-left: 62%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
    table.table {margin-top:15%;width:150%;margin-left:-325%;}
    .Abstand4 {margin-left:-130%;}
    img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
    img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
/*Chrome*/ @supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { 
    img.Marat {max-width: 50%;margin-left: -50%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}  
    table.table {margin-top:15%;width:150%;margin-left:-20%;}
    .Abstand4 {margin-left:-130%;}
    img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
    img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
    }
}

인터넷 익스플로러/크롬에서 웹 사이트를 확장하고 싶지만, 웹 사이트를 식별하기 위해 CSS 해킹을 사용해야한다는 것에 대해서는 어떻게해야할지 모르겠습니다.

나쁜 영어에 대해 죄송하고 도와 주셔서 감사합니다!

  • 답변 # 1

    최소 너비의 여러 미디어 쿼리를 사용하는 경우 다음과 같이 최소값을 맨 처음에 최대 값을 마지막에 입력해야합니다.

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            /* Set the background color of body to tan */
            body {
                background-color: tan;
            }
            @media screen and (min-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                body {
                    background-color: blue;
                }
            }
            @media screen and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                body {
                    background-color: olive;
                }
            }
            @media screen and (min-width:998px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                body {
                    background-color: aqua;
                }
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    
    

    이 순서로 미디어 쿼리는 IE10 +에서 잘 작동합니다. 순서가 잘못되면 아래 미디어 쿼리가 작동하지 않습니다.

    Chrome 브라우저에서도이 규칙을 따라야합니다. 다음 코드를 참조 할 수 있습니다 :

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            /* Set the background color of body to tan */
            body {
                background-color: tan;
            }
            @supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
                @media screen and (min-width:600px) {
                    body {
                        background-color: blue;
                    }
                }
    
                @media screen and (min-width:768px) {
                    body {
                        background-color: olive;
                    }
                }
                @media screen and (min-width:998px) {
                    body {
                        background-color: aqua;
                    }
                }
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    
    

관련 자료

  • 이전 java - 서비스를 찾을 수없는 후속 테스트에서 activemq 브로커 작성에 실패 - 'meta-inf/services/org/apache/activemq/wireformat/default'
  • 다음 scala - 구속 조건이 여러 개인 공분산 유형 모수