Firefox和IE邊框無法正常工作？

所以我一直試圖弄清楚這一天，但沒有任何運氣，並認爲我會轉向這裏的宇宙CSS主人。Firefox和IE邊框無法正常工作？

無論如何，在Chrome瀏覽器中我的頁面看起來很不錯（像往常一樣），但Firefox和IE似乎都有問題/調整圖像大小。我基本上有2個部分，一個'左邊的div'和一個'右邊的div'，左邊只有右邊的填充符，使其成爲整個寬度，減去右邊的div的寬度。

在'left div'裏面，有一個圖像的尺寸被設置爲包含元素的寬度和高度的100％，在Chrome中它的效果非常出色，並且使圖像保持中心並且看起來不錯。 FF和IE根本不會調整它的大小，更糟的是，它們不尊重'left div'上的填充，所以看起來更奇怪。

簡化HTML：

<div> 
     <div class="dialog-bg"></div> 
     <div id="view-larger-dialog" class="mc_report_dialog dialog-container"> 
      <div class="details-container staticimage"> 
       <span id="openPostModal"> 
        <span class="modal-body cardDetails"> 
         <div class="closeOpenModal">×</div> 
         <div class="cardContent"> 
          <div class="cardBody"> 
           <div id="card-content" class="card-content-staticimage"> 
            <span class="image"> 
             <img class="annotatable" src="https://s-media-cache-ak0.pinimg.com/originals/5a/28/22/5a282241e64e41d605384bb261ea581f.jpg"> 
            </span> 
           </div> 
          </div> 
         </div> 
        </span> 
       </span> 
       <span class="detailBox"> 
        <div class="cardContent cardDetails"> 
         <div class="content"> 
          <p> 
          blank white space 
          </p> 
         </div> 
        </div> 
       </span> 
      </div> 
     </div> 
    </div>

的CSS：

.dialog-bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: black; 
    opacity: 0.6; 
    z-index: 1001; 
} 
.mc_report_dialog .details-container { 
    padding: 0px; 
} 
span#openPostModal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 800px; 
    margin-top: 0px; 
    margin-left: 0px; 
    display: table; 
    z-index: 5000; 
    height: 100%; 
    background: none; 
    width: 100%; 
    box-sizing: border-box; 
    padding-right: 24rem; 
    border: none; 
} 
span.detailBox, span.shareNewBox { 
    width: 24rem; 
    height: 100%; 
    padding: 0; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    background-color: white; 
    z-index: 5005; 
} 
span#openPostModal .modal-body { 
    border: 0px solid #ffffff; 
    padding: .6rem 1rem; 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    max-height: 50%; 
    background: none; 
    overflow-y: visible; 
} 
.closeOpenModal { 
    font-size: 2rem; 
    color: #fff; 
    float: right; 
    position: absolute; 
    right: 1rem; 
    top: 1rem; 
    font-weight: 700; 
    cursor: pointer; 
    padding-right: 24rem; 
    opacity: 0.8; 
} 
span#openPostModal .cardContent { 
    background: none; 
    border: none; 
    position: relative; 
    width: 90%; 
    margin: auto; 
} 
span#openPostModal .cardContent .cardBody { 
    padding: 0; 
} 
span#openPostModal .cardContent .cardBody #card-content { 
    height: 100%; 
    padding: 0; 
} 
#card-content.card-content-staticimage .image { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
} 
#card-content.card-content-staticimage .image img { 
    max-height: 100%; 
    max-width: 100%; 
}

你可以看到的是here on my jsFiddle

任何幫助的結果將大大appeciated。

來源

2015-12-02 Nicholaus Chipping