Internet Explorer에서 이미지 위에 배치 된 텍스트가 다르게 보입니다.

Question

사용자의 화면 크기/브라우저에 관계없이 이미지의 오른쪽 상단에 "SOLD"라는 단어를 같은 위치에 유지하려고합니다. Chrome에서 잘 작동하지만 Internet Explorer를 사용하면 Chrome 브라우저에서 1440 픽셀로 표시되는 것보다 1440 픽셀 너비가 완전히 다른 곳에서 '판매 중단'표시됩니다.

나는 몇 개의 div와 이미지가 포함 된 목록 항목이있는 정렬되지 않은 목록이 있습니다. 당신은 내 사이트 나는 "판매"를 표시 할 목록 항목에 대한 here

볼 수있는 목록 항목의 코드는 다음과 같습니다

<li class="list__item"> 
      <figure class="list__item__inner"> 
    <a class="divLink" href="http://www.Demo"> 
      <img src="http://media-cdn.tripadvisor.com/media/photo-o/01/ca/eb/48/clenahoo-house.jpg" alt="" /> 
      <div class="caption">SOLD</div> 
      <div class="titlebox">Demo</div> 
      <div class="locationbox">Demo</div> 
      <div class="pricebox">Demo Demo</div> 
    </a> 
     </li> 

.

"캡션"이라는 클래스를 사용하여 현재 SOLD를 표시 할 수 있습니다. 이 요소의 CSS는

입니다.

.list__item .caption { 
    position: absolute; 
    width: 20%; 
    height: 10%; 
    top: 6%; 
    left: 56%; 
    font-size: 3.3vw; 
    font-weight:bold; 
    color: red; 
    } 

글꼴 크기는 '폭스 바겐'을 사용하여 반응이지만, Internet Explorer에서 뷰포트는 이미지 외부에 대한 1,000px 넓은 판매 텍스트 스틱에 도달하면,하지만이 같은 뷰포트 폭으로 발생하지 않습니다 Chrome에서.

어떻게 수정합니까? 고마워요 !!

Answer 1

뷰포트가 너비가되면 Chrome, IE 및 Firefox의 SOLD 텍스트가 이미지 외부에 표시됩니다. vw 대신 em을 사용하고 미디어 쿼리를 사용하여 다른 뷰포트의 글꼴 크기를 변경할 수 있습니다. 그리고 font-size: 3.3em;은 넓은 뷰포트에서 잘 작동합니다.

좁은 뷰포트를 들어, 미디어 쿼리를 사용할 수 있습니다

@media (max-width: 960px) { 
.list__item .caption { 
    font-size: 2em; 
} 

@media (max-width: 480px) { 
.list__item .caption { 
    font-size: 1.3em; 
} 

페이지가 모든 뷰포트에서 모든 브라우저에서 동일한 보이는 만들려고하지 마십시오.