Проблемы с загрузкой и Internet Explorer 11 - PullRequest
Новая
       17

Проблемы с загрузкой и Internet Explorer 11

0 голосов
/ 14 мая 2018

Итак, у меня небольшая проблема с форматированием в Internet Explorer 11.

Вот картинка из Google Chrome (ЭТО ИДЕАЛЬНО): введите описание изображения здесь

Вот картинка из Internet Explorer 11 введите описание изображения здесь

Вот код: 

.bottomRightBox {
  height: 170px; 
  width: 310px; 
  /* background-color: #4B92DB; 
  border: 1px black solid; //BOTTOM RIGHT BOX BORDER */ 
}

#contactsPicture {
  align: left; 
  valign: top;
  height: 98px;
  /* padding-top: 10px; //PADDING FOR CONTACT PICTURE */
}

#contactImg {
  width: auto;
  height: 148px;
}

.contactsPictureName {
  color: black!important;
  font-weight: normal!important;
  padding-left: 15px!important;
  padding-top: 2px;
}

#rightBottomHeading {
  float: right; 
  clear: right; 
  padding-right:176px;
  font-size: 18px!important;
  font-weight: bold!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-sm-offset-0 col-sm-12 col-md-4" style="padding-right: 0px;">
  <h4 id="rightBottomHeading">Office 365 Contacts</h4>
  
  <hr id="bottomRightLineBreaker"/>
  
  <div class="bottomRightBox">
    <table>
    <tbody>
    <tr valign="top" id="ctl00_m_g_63062bfa_96b4_4d90_b7c4_92ac5983dbfe_ctl00_uxGenericListView_ctrl0_ctl09_genericPicRow">
      <td id="contactsPicture">
        <div class="UserPhoto">
          <a href="IMAGE LINK" target="_blank" style="padding-right: 5px;"><img id="contactImg" src="IMAGE URL" alt="A" /></a>
          <a href="mailto:Portalhelp" style="padding-left: 5px;"><img id="contactImg" src="IMAGE URL" alt="P" /></a>
        </div>
      </td></tr>
    <tr valign="top">
      <td style="width: 106px" valign="top">
        <div class="contactsPictureName">
          <a href="PICTURE LINK" target="_black" style="color: black;"><p id="name" style="width: auto; float: left; clear: none;">NAME</p></a>
          <a href="URL" style="color: black;"><p id="name" style="width: auto; float: right; clear: none; margin-right: 45px;">PORTALHELP</p></a>
        </div>
      </td></tr>
    </tbody>
    </table>
  </div>
</div>

Любые входные данные с CSS форматированием и стилем будут высоко оценены. В настоящее время используется Bootstrap 3.

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Я бы предложил другой подход к вашему методу отображения. Вместо того, чтобы полагаться на кучу пользовательских объявлений css и float, почему бы не использовать Grid для этой ситуации? Рассмотрим следующую реализацию: 

.contactBox {
  padding-bottom: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    
    <!-- The Left Column (Implied but never specified) -->
    <div class="col-sm-12 col-md-8">
      <p>This area is intentionally left blank.</p>
    </div>

    <!-- Your Right Column -->
    <div class="col-sm-12 col-md-4">
      <h4>Office 365 Contacts</h4>
      
      <div class="row">
        <div class="contactBox col-xs-6 col-md-4 text-center">
          <a href="#userPhotoLink"><img src="https://placehold.it/250x150" class="img-responsive" /></a>
          <a href="#userEmailLink">Name</a>
        </div>

        <div class="contactBox col-xs-6 col-md-4 text-center">
          <a href="#userPhotoLink"><img src="https://placehold.it/250x150" class="img-responsive" /></a>
          <a href="#userEmailLink">Name</a>
        </div>

        <div class="contactBox col-xs-6 col-md-4 text-center">
          <a href="#userPhotoLink"><img src="https://placehold.it/250x150" class="img-responsive" /></a>
          <a href="#userEmailLink">Name</a>
        </div>

        <div class="contactBox col-xs-6 col-md-4 text-center">
          <a href="#userPhotoLink"><img src="https://placehold.it/250x150" class="img-responsive" /></a>
          <a href="#userEmailLink">Name</a>
        </div>

        
      </div>
      
    </div>
  </div>
</div>

В приведенном выше коде мы больше полагаемся на компонент Bootstrap 3.x Grid, а также на несколько других служебных классов. Дополнительным бонусом является то, что, более активно полагаясь на Bootstrap, вы получаете возможность предлагать более гибкое поведение.

Это действительно требует только одну пользовательскую строку CSS; .contactBox ... который действительно предназначен только для того, чтобы обеспечить правильное заполнение нижней части, без необходимости повторять итерацию row или добавлять разрывы строк.

Возможно, вам потребуется расширить фрагмент, чтобы увидеть, как макет можно настроить в зависимости от разрешения экрана. Кроме того, вы можете просмотреть тот же код по следующей ссылке Bootply: https://www.bootply.com/LK0cVLrCBm

0 голосов
/ 14 мая 2018

Понял, ребята!

Благодаря Гирдхарилалу и его попытке мне удалось использовать: 

.UserPhoto a {
  display: -ms-inline-flexbox;
}

, который в итоге работал отлично.

...