Моя страница не отображается правильно на IE?

Question

Я удалил все встроенные и унифицированные все ширины и высоты с использованием px, однако он по-прежнему не отображается правильно в IE.

.textbox { 
    background-color:rgba(0, 0, 0, 0.5); 
    width:172px; 
    height:220px; 
    border:solid; 
    border-width:1px; 
    border-color:#CCC; 

    .gap { 
    padding:5px; 
    } 

    .text { 
    color:#FFF; 
    margin-top:20px; 
    margin-left:45px; 
    margin-bottom:0px; 
    font-weight:bold; 
    font-size:40px; 
} 

<td class="tdstyle2"> 
        <div class="textbox"> 
         <img alt="2nd Day Of Christmas" src="/netalogue/2nd-day-christmas-blurry.jpg"> 
         <div class="gap"> 
          <p class="text">2nd</p> 
         </div> 
        </div> 
       </td> 

Пожалуйста, обратите внимание, вы не сможете увидеть изображения как URL, изменяются с помощью веб-платформы https://jsfiddle.net/5s8f01r5/1/

Answer 1

Вы можете CLEARN код что-то вроде этого:

.textbox { 
background-color:rgba(0, 0, 0, 0.5); 
width:172px; 
height:220px; 
border:solid; 
border-width:1px; 
border-color:#CCC; 
} 

.text { 
color:#FFF; 
margin-top:20px; 
margin-left:45px; 
margin-bottom:0px; 
font-weight:bold; 
font-size:40px; 
} 
.general { 
height: 222px; 
width: 182px; 
} 
.padding-div { 
padding: 5px; 
} 
.size-img{ 
width:172px; 
height: 126px; 
} 

<div class="general"> 
    <div class="textbox"> 
      <img alt="2nd Day Of Christmas" src="/netalogue/2nd-day-christmas-blurry.jpg" class="size-img"> 
       <div class="padding-div"><p class="text">2nd</p></div> 
    </div> 
</div>