Почему IE обрезает ширину текста, но в других браузерах это не так - PullRequest
Новая
       1

Почему IE обрезает ширину текста, но в других браузерах это не так

0 голосов
/ 30 сентября 2018

Я создаю свою собственную версию центра уведомлений в стиле IOS для своего веб-сайта, но это еще не сделано, но я обычно использую цветные элементы и элементы, чтобы разобраться в этом, но я замечаю, что id вызывает #label AKA, который говорит:уведомления зеленого цвета отключаются в Internet Explorer.

enter image description here

, но в chrome и других браузерах оно не обрезается.

enter image description here

Так почему же и как я могу помешать IE сократить ширину метки вызова id?

Вот мой код 

html{
    height:100%;
    background: url('https://pbs.twimg.com/media/DTV_XvDVMAE39aE.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: black;
  font-family: raleway;
  color: white;
}

#notification-system{
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right:0;
  left: 0;
  bottom: 0;
}

#internal-container{
  background-color: dodgerblue;
  position: fixed;
  width: 80%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
}

#label{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
  width: 165px;
  background-color: green;
  font-size: 30.10px;
}

#app-container{
  background-color: red;

  width:  100%;
  
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  bottom: 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.app{
  background-color: gray;
  position: relative;
  
}

.app .icon-container{
  background-color: gold;
  background-color: rgba(0, 0, 0, 0.3);
  height: 35px;
  width: 35px;
  position: absolute;
}

.app .icon{
  background-color: gold;
  height: 25px;
  width: 25px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.app .info-container{
  background-color: brown;
  width: 100%;
  position: relative;
  margin-left: 35px;
  top: 0;
}

.app .name-container{
  height: 35px;
  background-color: forestgreen;
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
 
    display: flex;

}

.app .name{
  height: 16px;
  font-size: 13px;
  background-color: brown;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 70px;
  font-weight: bold;
}

.app .delete{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-right: 40px;
  height: 18px;
  width: 18px;
  cursor: pointer;
}


.app .notification{
  background-color: blue;
  height: 60px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  display: flex;
  
}

.app .notification .details-container{
  background-color: black;
  margin: auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 48px;
}

.app .notification .app-tracker-name{
  height: 16px;
  font-size: 12px;
  color: red;
  font-weight: bold;
  background-color: gold;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 35px;
}

.app .notification .info{
  height: 16px;
  font-size: 12px;
  background-color: tan;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 35px;
}

.app .notification .time-and-date{
  
    height: 16px;
  font-size: 12px;
  background-color: brown;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 35px;
}

.show-more-container{
  background-color: silver;
  height: 28px;
  position: relative;
  margin-right: 35px;
}

.show-more{
 background-color: purple;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 height: 20px;
 width: 40px;
 color: red;
 font-weight: bold;
 cursor: pointer;
 -webkit-touch-callout: none; 
 -webkit-user-select: none; 
 -khtml-user-select: none; 
 -moz-user-select: none; 
 -ms-user-select: none; 
 user-select: none; 
}

#close-container{
background-color: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 25px;
  margin: auto;
}

#close{
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 15px;
  margin: auto;
  cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<style>

</style>

<div id='notification-system'>

  
 
  <div id='internal-container'>
  
    <h1 id='label'>Notifcations</h1>
    
    <div id='app-container'>
      
      <div class='app'>
        <div class='icon-container'>
          
          <img class='icon' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IMessage_logo.svg/768px-IMessage_logo.svg.png'>
        </div><!--<icon-container>-->
        
        <div class='info-container'>
          <div class='name-container'>
            <p class='name'>Face TIme jdhfjhsdjkhsjdk jsdhjkfhsd sdhjfsd fhsdhfsn  fdgsedfsdjhbkjsdnjksdkjnfjkjksewdnjkfsd jhsdjkjfkjklsdjkljsdkjsfd jsdkljdskfljklsdf klsdjkljsfdkljfdskljsdfklj</p>
            
                      <img class='delete' src='https://promotions.newegg.com/microsoft/15-2820/img/icon_closeButton_256.png'>
            
          </div><!--name-container>-->
          

          
          <div class='notification'>
            <div class='details-container'>
            <p class='app-tracker-name'>Face Time</p>
            <p class='info'>Missed FaceTime Call</p>
            <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div><!--</details-container>-->
          </div><!--</notification>-->
          
         <div class='notification'>
            <div class='details-container'>
            <p class='app-tracker-name'>Face Time</p>
            <p class='info'>Missed FaceTime Call</p>
            <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div><!--</details-container>-->
          </div><!--</notification>-->
          
          <div class='notification'>
            <div class='details-container'>
            <p class='app-tracker-name'>Face Time</p>
            <p class='info'>Missed FaceTime Call</p>
            <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div><!--</details-container>-->
          </div><!--</notification>-->
          
          <div class='notification'>
            <div class='details-container'>
            <p class='app-tracker-name'>Face Time</p>
            <p class='info'>Missed FaceTime Call</p>
            <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div><!--</details-container>-->
          </div><!--</notification>-->
          
          <div class='notification'>
            <div class='details-container'>
            <p class='app-tracker-name'>Face Time</p>
            <p class='info'>Missed FaceTime Call</p>
            <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div><!--</details-container>-->
          </div><!--</notification>-->
          
          <div class='show-more-container'>
          <p class='show-more'>More</p>
          </div><!--</show-more-container>-->
            
        </div><!--</info-container>-->
        
      </div><!--</app>-->
      
    </div><!--</app-container>-->
  
      <div id='close-container'>
    <img id='close' src='https://www.freeiconspng.com/uploads/up-white-arrow-clip-art-3.png'>
  </div><!--</close-container>-->
    
  </div><!--</internal-container>-->
    
</div><!--</notification-system>-->

1 Ответ

0 голосов
/ 30 сентября 2018

Элементы с position: absolute; по умолчанию сжимаются до ширины их содержимого .Вы переопределили это поведение по умолчанию, установив

a) left: 0; right: 0;

, который говорит браузеру растянуть его до 100% ширины эталонного элемента;

и

b) width: 165px;

, который также отменяет поведение по умолчанию (и также ранее определенное вами поведение из a)).

Чтобы восстановить его, удалитеright: 0; и width: 165px;, затем замените left: 0; на left: 50%;.Это помещает контейнер start в 50% горизонтальное положение контрольного элемента.Теперь вам нужно исправить положение, переместив контейнер на половину его собственной ширины влево, используя transform: translateX(-50%);: 

html {
  height: 100%;
  background: url('https://pbs.twimg.com/media/DTV_XvDVMAE39aE.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: black;
  font-family: raleway;
  color: white;
}

#notification-system {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#internal-container {
  background-color: dodgerblue;
  position: fixed;
  width: 80%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
}

#label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
  background-color: green;
  font-size: 30.10px;
}

#app-container {
  background-color: red;
  width: 100%;
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  bottom: 26px;
  overflow-y: auto;
  overflow-x: hidden;
}

.app {
  background-color: gray;
  position: relative;
}

.app .icon-container {
  background-color: gold;
  background-color: rgba(0, 0, 0, 0.3);
  height: 35px;
  width: 35px;
  position: absolute;
}

.app .icon {
  background-color: gold;
  height: 25px;
  width: 25px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.app .info-container {
  background-color: brown;
  width: 100%;
  position: relative;
  margin-left: 35px;
  top: 0;
}

.app .name-container {
  height: 35px;
  background-color: forestgreen;
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
}

.app .name {
  height: 16px;
  font-size: 13px;
  background-color: brown;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 70px;
  font-weight: bold;
}

.app .delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-right: 40px;
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.app .notification {
  background-color: blue;
  height: 60px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  display: flex;
}

.app .notification .details-container {
  background-color: black;
  margin: auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 48px;
}

.app .notification .app-tracker-name {
  height: 16px;
  font-size: 12px;
  color: red;
  font-weight: bold;
  background-color: gold;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 35px;
}

.app .notification .info {
  height: 16px;
  font-size: 12px;
  background-color: tan;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 35px;
}

.app .notification .time-and-date {
  height: 16px;
  font-size: 12px;
  background-color: brown;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 35px;
}

.show-more-container {
  background-color: silver;
  height: 28px;
  position: relative;
  margin-right: 35px;
}

.show-more {
  background-color: purple;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 20px;
  width: 40px;
  color: red;
  font-weight: bold;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#close-container {
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 25px;
  margin: auto;
}

#close {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 15px;
  margin: auto;
  cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<div id='notification-system'>
  <div id='internal-container'>
    <h1 id='label'>Notifcations</h1>
    <div id='app-container'>
      <div class='app'>
        <div class='icon-container'>
          <img class='icon' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IMessage_logo.svg/768px-IMessage_logo.svg.png'>
        </div>
        <!--<icon-container>-->
        <div class='info-container'>
          <div class='name-container'>
            <p class='name'>Face TIme jdhfjhsdjkhsjdk jsdhjkfhsd sdhjfsd fhsdhfsn fdgsedfsdjhbkjsdnjksdkjnfjkjksewdnjkfsd jhsdjkjfkjklsdjkljsdkjsfd jsdkljdskfljklsdf klsdjkljsfdkljfdskljsdfklj</p>
            <img class='delete' src='https://promotions.newegg.com/microsoft/15-2820/img/icon_closeButton_256.png'>
          </div>
          <!--name-container>-->
          <div class='notification'>
            <div class='details-container'>
              <p class='app-tracker-name'>Face Time</p>
              <p class='info'>Missed FaceTime Call</p>
              <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div>
            <!--</details-container>-->
          </div>
          <!--</notification>-->
          <div class='notification'>
            <div class='details-container'>
              <p class='app-tracker-name'>Face Time</p>
              <p class='info'>Missed FaceTime Call</p>
              <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div>
            <!--</details-container>-->
          </div>
          <!--</notification>-->
          <div class='notification'>
            <div class='details-container'>
              <p class='app-tracker-name'>Face Time</p>
              <p class='info'>Missed FaceTime Call</p>
              <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div>
            <!--</details-container>-->
          </div>
          <!--</notification>-->
          <div class='notification'>
            <div class='details-container'>
              <p class='app-tracker-name'>Face Time</p>
              <p class='info'>Missed FaceTime Call</p>
              <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div>
            <!--</details-container>-->
          </div>
          <!--</notification>-->
          <div class='notification'>
            <div class='details-container'>
              <p class='app-tracker-name'>Face Time</p>
              <p class='info'>Missed FaceTime Call</p>
              <p class='time-and-date'>4:30PM 1-1-2019</p>
            </div>
            <!--</details-container>-->
          </div>
          <!--</notification>-->
          <div class='show-more-container'>
            <p class='show-more'>More</p>
          </div>
          <!--</show-more-container>-->
        </div>
        <!--</info-container>-->
      </div>
      <!--</app>-->
    </div>
    <!--</app-container>-->
    <div id='close-container'>
      <img id='close' src='https://www.freeiconspng.com/uploads/up-white-arrow-clip-art-3.png'>
    </div>
    <!--</close-container>-->
  </div>
  <!--</internal-container>-->
</div>
<!--</notification-system>-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...