为什么 IE 会切断文字宽度，但在其他浏览器中却没有

Question

我正在为我的网站创建我自己的 IOS 样式版本，例如通知中心，它还没有完成，但我通常使用颜色编码的 div 和元素来查看我的方式，但我注意到 id 调用 #label AKA 元素说在 Internet Explorer 中，绿色通知会被切断。

但在 chrome 和其他浏览器中它不会被切断。

那为什么会这样？如何防止 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>-->

Answer 1

带有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>-->